acidking

It doesn't double trigger, it works smoothly, it's the best solution I found. With scrollTo plugin I had the same issues with Safari, even with autoKill, only jQuery scrollTop seemed to work seamlessly across all devices and browsers. See my earlier posts in this thread for more details about the issue I faced. Low FPS also causes scrollTo to diе. Anyway, tweak and see what you get, but I can't suggest waste time trying to get scrollTo to work on properly.

I twisted and turned for weeks over this issue, eventually I figured it's best to just use jQuery scrollTop, somehow I found it more reliable, such as: $('html, body').animate({ scrollTop: 0 } Make sure you include html and body as above.

I am a front-end developer so I work on some very complicated HTML structures for some large web applications, usually those are built with C# which are propriety and you can't have access to because they're managed and updated by someone else, the web app already has !important specificities, so you loaded your custom CSS which also includes !important specificities in order to override initial ones, then (as per my current requirement) you want to use a Greensock tween, but you can't unless you override your own !important specificities. I know it's not an ordinary situation or a site which you have complete control of. Thanks, I'll try the onUpdate method.

Wrong, you can use it inline in the tag style attribute in order to override other stylesheets, such as <div class="someClass" style="color: #ccc !important;">. Anyway I am not here to give you a tutorial, my question was why does the !important specificity not work when included as a CSS attribute in a Greensock css value, such as in the example I provided earlier, and how can I possibly make it work? What is there to check? Nothing to check. A Codepen is not applicable obviously because as I was saying, the !important specificity doesn't work.

The !important priority declaration doesn't seem to work, is there a way to make this work? Perhaps if I pass it as a plain text string? Not sure how that can be done though. Thanks. TweenLite.to($('.popup'), 0.2, { css: { display: 'block !important', opacity: '1'} });

Awesome! That worked nicely. Thanks. Thanks Jack.

Hi, I am trying to create a popup over a button with a delay, the problem is if I hover out of the button before the delay is over, then the tween would still go on. I know I can kill the tween in Timeline, but I am not using timeline here because I am using a (this) call. Any suggestion would be appreciated. $('.button').on('mouseenter', function () { TweenLite.to($(this).children('.popup'), 0.2, { delay: 1, opacity: '1' }); }); $('.button').on('mouseleave', function () { TweenLite.to($(this).children('.popup'), 0, { opacity: '0' }); });

I have several timeline animations playing, I would like to call a function when they're done, each might end at variable times, is there a way to listen to either all timelines, selected timelines, or until the global greensock engine is no longer playing so I can all the function?

I have a call() in the timeline, but when I seek() into the timeline it doesn't call the call() function, only calls it when I use play() or progress(), but progress doesn't work for the way I am trying to apply it. Is there another property I can use which would call the function?

Why does it degrade performance? I thought setting force3D to true actually improves it? When I tried it I checked the FPS and it seemed higher, while without it FPS dropped. Thanks Jack, I'll try that.

Yes in the middle of the tween I'd like to change a value, without rewinding or restarting, so if for example it reached the middle of the tween at 0.5 secs, it would become left:50, then I change the starting value to left:20, then instead of where the play head is at left:50, it would become left:40. Hope that makes sense. I am basically using scroll position to play the animation, kind of parallax behaviour, so I can't restart unless I scroll back to the top and than back again to the previous location, which wouldn't look nice.

How can I add force3D to the entire timeline rather than on each single event?

Thanks Peleg, I'll try that. Jonathan, if you read my post to the end, I mentioned that I can't use timeScale.

I have a line in the timeline such as: .fromTo('.divName', 1, {left: '0' }, {left: '100'}) How can I update the value of left: 0, for example, to another value, at run-time while the animation is playing? I tried to use a variable, but things started to behave in a weird way.

Is it possible to stretch or squeeze the length of a timeline by seconds? For example I have a timeline of 5 seconds, I would like to stretch it to 10secs, so it plays slower, and perhaps later squeeze it to 3 seconds so that it plays faster. I can't use timeScale, it doesn't work the way I am applying it.

How recent? I am using 1.11.0

Nope didn't work, no effect at all. What I am trying to achive is simply play from wherever it is, to the new target label within a set amount of seconds regardless of what happens within the timeline.

For example I would like to tweenTo a label "3rd", but it seems to play the rest of animation in sequence, which takes about 10 seconds, but I would like it to tweenTo that label within a shorter timeframe such as 2 seconds. How do I set that speed so that it overrides the rest of the animation? WITHOUT setting the timeScale, which I already tried. var myAnim = new TimelineMax(); myAnim.to('.SomeClass', 5, {right:'10%'}, "1st") .to('.SomeClass', 5, {right:'20%'}, "2nd") .to('.SomeClass', 5, {width: '30%'}, "3rd"); myAnim.tweenTo("3rd");

Hi, yes that links shows a good example using progress(). Here's another example: http://www.mozilla.org/en-US/firefox/os/ If you click 'The Features' on top, then scroll down and see the phones and text moving in and out on the grey background. I know that was done with Scrollorama, which uses Greensock as a base for animations, but I don't want to use scrollorama and prefer a direct method.

Is it possible to play an animation on mouse scroll? I assume it requires using seek(), an example would be very helpful! What I am trying to achieve is having the timeline animation scaled to a range of scroll position, for example the timeline should start playing from scrollTop 1000 and end at scrollTop 3000, for example, so that it's playing while the user is scrolling.

Add autoKill false after this line: y:$("#headline2").offset().top So it becomes: y:$("#headline2").offset().top, autoKill:false This way it completes the tween and fires the onComplete even if the target doesn't reach the top due to no space at the bottom of the page. I found it necessary to add autoKill false when using ScrollTo plugin because if the page is heavy and the FPS drops to less than 30fps during the scroll then the tween will autokill itself and wouldn't complete the tween, unlike jQuerys scrollTop, which seems to have AutoKill false on by default.

Similar but not the same, for the resize, it basically saves the window size at the beginning from the time the page loaded, and after resize is finished it compares it to the window size then, if both are bigger or smaller than the set margin then reload the page. I later added the debounce code of Ben Alman (above) to the checkWidth() function, so it only checks it at the end of the resize.

Thank you. So I guess autoKill was true by default.

I've been tweaking and reorganise the code and it's much better now in Safari, but still at some places the browser fps has to drop to 30, and when that happens, in Safari the GSAP scrollTo function dies. I resorted to use jQuerys ScrollTop, as it doesn't die in the middle of the scroll regardless of the FPS or how slow the scroll duration is. I also noticed the results are better when I strategically used the killTweensOf or killDelayedCallsTo on tweens that are causing scrollTo to hang, regardless I think scrollTo should never die in the middle of a scroll because of low fps. Also I found this very handy code which helps control the FPS: http://benalman.com/projects/jquery-throttle-debounce-plugin/ I can use the above plugin along with GSAP scrollTo and it works fine, but for now I'll stay safe and stick to jQuery scrollTop.

Thank you. I managed to add it in this way: tl.tweenTo("label2", {ease:Bounce.easeOut, onComplete:resetTimeScale}).timeScale(2); It wasn't necessary to reset the timer, the timeline would still play the same previous speed.