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.