[ScrollTo bug in 1.8.2 in Safari 6.0.2 & Mountain Lion]

double triggers in some cases. Correct me if i'm wrong.

 

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.

[ScrollTo bug in 1.8.2 in Safari 6.0.2 & Mountain Lion]

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.

[CSS: !important doesn't work?]

And again, I'm really interested to see a practical use case for this. 

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.

[CSS: !important doesn't work?]

Hello.. the !important declaration should be used in the style sheet to override inline styles, not set inline on tags.. and is used as a last resort.

 

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?

 

Check out this link about CSS Specificity

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

 

 

What is there to check? Nothing to check.

 

 

Also a codepen example will be helpful to help us help you.

A Codepen is not applicable obviously because as I was saying, the !important specificity doesn't work.

[CSS: !important 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'} });

[Hover popup effect with delay, too late]

 

Perhaps try changing the overwrite e.g.

TweenLite.set($(this).children('.popup'), { opacity: 0, overwrite: "all" });

 

Awesome! That worked nicely. Thanks.

 

Thanks Jack.

[Hover popup effect with delay, too late]

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' });
    });

 

[Listen until all tweens are complete?]

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?

[call() not calling function when seeking, only on progress() play()?]

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?

[Timeline: force3D on entire Timeline?]

 

We caution against using force3D in excess as it can actually degrade performance if over-used. 

 

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.

[TimelineMax: Update values at run-time?]

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.

[Timeline: force3D on entire Timeline?]

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

[TimelineMax: Squeeze or stretch the timeline length?]

Thanks Peleg, I'll try that.

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

[TimelineMax: Update values at run-time?]

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.

[TimelineMax: Squeeze or stretch the timeline length?]

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.

[Timeline: How to tweenTo within a number of seconds?]

How recent? I am using 1.11.0

[Timeline: How to tweenTo within a number of seconds?]

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.

[Timeline: How to tweenTo within a number of seconds?]

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");

[TimelineMax: Play animation on mouse scroll?]

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.

[TimelineMax: Play animation on mouse scroll?]

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.

[onComplete doesn't fire??]

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.

[ScrollTo bug in 1.8.2 in Safari 6.0.2 & Mountain Lion]

Actually, it looks like you are doing something similar for your resize events already...

 

 

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.

[ScrollTo bug in 1.8.2 in Safari 6.0.2 & Mountain Lion]

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

 

I suspect you're running into something with the autoKill feature which automatically tries to sense if you (or any other process) altered the scroll position outside of the tween (like if the user flicks their scrollwheel in the middle of the tween) and if so, it kills that part of the tween. You can disable this by passing autoKill:false into the tween. 

TweenLite.to(window, 1, {scrollTo:{y:300, autoKill:false}});

Again, that feature is intended to HELP you, but Safari seems to have some bugs in the way it handles scrolling at times. 

[ScrollTo bug in 1.8.2 in Safari 6.0.2 & Mountain Lion]

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.

[TimelineLite: How to set seek() duration or easing?]

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.