AIM

MSN

Website URL

ICQ

Yahoo

Jabber

Skype

Location

Interests

Hi! I'm a little stuck on a little issue 👾
I am trying to make a simple responsive variable in a tween. At different screen sizes, the box needs to move up by varying amounts ( does not work with yPercent )
It was suggested somewhere on this forum that className would work for this, but the css values seem to 'cache' to whatever rules applied at the screen size on page load. i.e. On the codepen the red box should move to the top of the grey bar, and < 1000px turn black, > 1000px turn green.
It does this if you run the pen at either size, but if you resize live the initial css value is always used.
Is there an easy way around this? Or a simpler method?
I also tried using modifier plugin, as suggested elsewhere, but had similar results ( I couldn't find the modifiers plugin js link to make another codepen, commented out in my demo )
I'm guessing some sort of destroy / rebuild the timeline on resize would do the trick, but would be nice if I didn't have to do that? ( maybe not relevant but I am attaching it to a scrollmagic scene, which triggers the shrink / expand nav logo on scroll )
Cheers Greensock you're awesome!

Hello,
I have some unexpected (for me) behavior while sizing elements, here is the pen:
As you see, red box is not synced with blue while animation runs (after clicking). It happens because the height of the container is animated, but it is not supposed to be, as the .clicked (container css class) doesn't contain height property. Can you explain please, how to animate only properties defined in target class?

Hello Everybody
I'm experimenting with tweening CSS classes containing 3d transforms. It works very well in most cases but I’m stuck with the getting rotations into the right direction.
I wish the “DirectionalRotationPlugin” would help me out here. But I wouldn’t like to set the target values via JavaScript.
Please click the door in my pen to see what I mean and check the CSS class “.open”. Maybe it is a pure CSS problem.
Any advice is very welcome.
Henry

Anybody have an issue with className?
I use className to add a class to stop the main page from scrolling when a window(modal) is in view.
Sometimes it is removed on timeline reversal. Sometimes it doesn't remove.
When it doesn't remove it leaves the main page un-scrollable.
I've got 3 sites in production at the moment and this happens on all of them.

Hi all,
Currently I'm testing a website on which I use some GSAP animations. One of this animations causes a error in Firefox (v51 run a Macbook Pro retina).
This is the code that causes the error:
this.tl
.set(this.modalBackground, {
display: "block",
className: "+=" + this.modalBackgroundModClass
})
The classname line causes the following error in Firefox:
TypeError: this.ownerSVGElement is null
This code does work on all other devices and browsers on which I've tested on. I also can make it work by adding the class like this:
this.tl
.set(this.modalBackground, {
display: "block",
onComplete: function () {
this.modalBackground.classList.add(this.modalBackgroundModClass);
}.bind(this)
})
But I would like to use the className way. Any idea on what is going wrong?
Thanks in advance.

Hi guys,
Just quickly (I haven't got time atm to slap an example codepen together), is there a way to toggle the CSS className attribute?
I have an object that's being manipulated a lot, and one of the tweens is removing a class from an element, and animating it's new position accordingly.
className: '-=responsive-example_small'
This works fine, until I reverse the timeline... At which point the class isn't re-added to object, and obviously, no animation occurs, resulting in a broken reverse animation.
I know I can remove the "-=", but that overwrites all the classes on the element in question as well, which is again, undesirable and dangerous to maintain.
Is there a toggle for ClassName that I simply haven't come across before? Much like JQuery's $(e).toggleClass('someClass')?
If not, is it a possibility for the future?
Thanks a lot!

Hello Greensock,
I am trying to tween and add 2 className to the same element using greensock. Please refer to the codePen example, i would like to add .bkg-color & .bdr to the #element, but somehow the first added class is then replaced by the 2nd tween. Any advise will be appreciated
http://codepen.io/yengkit/pen/QEAXBB

Hi!
Think I found a bug of some sort that if I add a class name using TweenMax and my tweening object has already a classname that contains the same word it removes.
Example:
Want to add a class by name: "hover"
My div has classes: <div class="btn animate-hover color-green">My Button</div>
The result will be: <div class="btn animate- color-green hover">My Button</div>
It shouldnt behave like that am I right?
If using underscore it works: <div class="btn animate_hover color-green hover">My Button</div>
Possible to solve this?
Many thanks!

Hello Carl, Jonathan & all GSAP crew. First of all I wanna tell you HUGE THANKS for your awesome library. GSAP is the best one for web animation. W3C should add it for standarts of HTML5 or HTML6 =)
Now about my strange issue.
For my project i used scrollTo plugin & TweenMax.to className. Animation works fine when you click once or twice on image. But if you click a few more times animation starts glitching. And few more times & browser hangs off. I have 10 images on page & when you click on every image to expand it animation starts glitching too. Maybe it's problem with logic of my code or something else.
I created a small codepen demo to show you my problem.
Please help me to solve it.

Hi there,
I'm building a custom collapse navigation. See codepen: http://codepen.io/anon/pen/GZKmaR
The 'nav' element needs to toggle two classNames. If its collapsed (by click), and if its animating(by timeline). Some how, the 'collapsed' class will not be removed if you close the navigation. If i remove the +=animating classnames in the timeline, it will work..
Of course, i can rebuild the HTML and toggle the className on another element to fix this issue, but i dont want that
Does anyone has the same issue and is there a simple fix?

Hy guys,
I love your library since the Flash times
I just found what I think is a bug. In the codepen link there is an example.
If you tween a class which name is contained in another class, the part of name of tweened class was subtracted on the other class
<div class="open-sub" id="tween"></div>
if I tween a class with the name "open"
TweenMax.to("#tween", 1, {className: "+=open"} );
// +=open or -=open produce same bug
the "open-sub" class will become "-sub"
Nothing breaking, but could lead in a very tricking result

Greetings,
I've encountered a strange issue where tweening a class name in a timeline causes issues when you reset that timeline via pause(0). The codepen has more info, please check it out: http://codepen.io/anon/pen/NGRgKB
Please let me know if my syntax is incorrect, or perhaps if changing classes using both Greensock and jQuery might be causing the problem. Thank you!
-Gwen

Is there a way to override properties set by GSAP when tweening a className?
Here's a demo where I initially set my boxes to a height of 50. I then tween them to a class that has a height of 150, but the height won't change unless I use clearProps. However, I really don't want to clear any props and you can't animate the clearing of props.

Hi,
I have some issue since the last update with "-webkit-"
Not sure this bug has been fixed
FIXED problem caused by some Webkit browser reporting redundant/duplicate transform values (in both "transform" and "WebkitTransform") of the computed style which could cause className tweens to act oddly.I make a simple TweenMax.to('element', 1, {className: "+=active"}); and bam !
http://codepen.io/stephanedemotte/pen/bNRXYO
Only on Safari and Chrome.
Everything good with gsap : 1.15.0

hi!
I'm doing something a bit like this;
TweenMax.to(element, 0.3, {className:'+=over'});
where the .over class has different colour, position etc, but also different background-position.
My problem is, i'd like the background-position to not tween, while the rest of the properties do.
is there a way to add an exception to the tween?
Any ideas?
thanks,
Andy

I seem to be having an issue adding a class with className when I already have 3 classes on an element.
This is the line I'm using:
TweenLite.to(this.element, 0.1, {className:'+=maximized'});
Thoughts?

Obviously we can animate between classes by either adding or removing them... but can we do both, without affecting other classes attached to the element?
For example, if I have:
<div id="my-div" class="item position-1"></div>
Can I replace position-1 with position-2 ?
I also note that CSS3 transforms are supported, but all vendor prefixes are required -- so how would this work with IE<9?
As a side note, I'm working with:
* VERSION: beta 1.9.6
* DATE: 2013-05-07
So if any of these issues have been addressed in the latest versions I'm more than happy to upgrade.

When I attempt to tween using className, I am not seeing a tween of that classes properties as it is applied/removed, but rather an instantaneous application/removal of the class. I have had this problem on a few projects, and it is usually in a menu when I am trying to tween the activated menu item. I am using this version of greensock:http://code.jquery.com/jquery-latest.min.js
ex:
//to activate:
TweenLite.to(element, 1, {className:"active" ,ease:Linear.easeNone});
//to deactivate:
TweenLite.to(element, 1, {className:"" ,ease:Linear.easeNone});
Is there something I am doing wrong or not understanding?

i was trying to use the className property on TweenLite to add and remove a css class from an element during mouse over an mouse out. using jquery, i had done something like this:
this.$container.hover( function( evt ) {
TweenLite.to( _this.$content, 0.5, { className: "+=open", ease: Expo.easeInOut });
}, function( evt ) {
TweenLite.to( _this.$content, 0.5, { className: "-=open", ease: Expo.easeInOut });
});
the problem i'm having is when i interrupt the animation with another mouse event that will cause it to remove the class before the animation is finnished, it seems the class name doesnt actually become added onto the element until after the animation is complete. so if you hover in and hover out before the animation completes, there wont be any class name to remove and the tween for removing the class will be ignored.
i hope this makes sense.
thanks for you time!

Hello,
I'm using the following code to animate a div coming in and to add a class to a second div.
Working perfectly on the mac and ios but on windows there are some issues.
ie8 animation working but the classname is not being added (haven't tried newer versions).
firefox nothing is working.
here is my code:
$(document).ready(function() {
var tl = new TimelineMax();
tl.append( TweenLite.to(awardOne, .125, {css:{className:"+=awardOneOn"}}) );
tl.append( TweenLite.to(awardOneContent, .125, {css:{autoAlpha:1}}) );
tl.append( TweenLite.to(awardOneContent, .5, {css:{height:159,top:480}}) );
tl.pause();
awardOne.onclick = function() {
tl.play();
};
closeIcon.onclick = function() {
tl.reverse();
};
});
Thank you
-Dennis

Hi Jack, thanks for the gsap.
From what i see the overwrite auto does not work for tweens initiated via css className.
So if you have say an on-mouseover and add a css class {css:{className:"+=class1"}} and then mouse-out before the css property tweens are complete and remove the class {css:{className:"-=class1"}}, the first tween/s are not cancelled and continue to completion - and then the remove class takes effect immediately.
If you use overwrite "all" - all tweens stop as expected.
Cheers

“ @greensock is just pure awesomeness. What more can be said? ”

“ Go and browse through FWA or Awwwards, then view source of anything you see that has cool animation and you will be surprised how widely GSAP is used. ”

John Polacek

“ Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers. ”

Tahir Ahmed

“ GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try. ”

Vic C., @puppetMaster3

“ ...obviously GSAP is incredible ”

Paul Irish

Google

“ If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients. I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with. ”

Thomas Summerall

“ I am more and more amazed every day, and very glad that I decided to get a business license. ”

LilaQ

Thanks for signing up!

Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.