Leaderboard

Thank you for the nice demo. The main problem was that you gave your SVG an id of border but you really want a <rect> inside the SVG to have that ID so that DrawSVG can animate it. var tl = new TimelineMax(); tl.add("reveal"); tl.to("#lay1",2,{opacity:1 }); tl.to("#lay2",2,{opacity:1 }); tl.to("#lay3",2,{opacity:1 }); tl.to("#lay4",2,{opacity:1 }); //create a tween that has a duration the same as the timeline and put it at a time of 0 tl.fromTo("#border", tl.duration(), {drawSVG:0}, {drawSVG:"100%"}, 0);

If you don't like PointA or PointB check out these suggestions from @PointC

Ya actually I tried dolly zoom last month after watching some video about dolly zoom in movies, it is not that easy to achieve, at least in 2D space. Not sure if I got it right, I may have to watch few more videos.

oh, forgot to tell you guys. As of 1.20.0 if you add a tween to a timeline immediately after a repeating tween the new tween will go directly after the first iteration of the repeating tween. https://github.com/greensock/GreenSock-JS/commit/fb5cede26aa0a6463f2faac755d09579750c9e7a var tl = new TimelineMax(); tl.to(".red", 1, {rotation:360}) .to(".blue", 1, {rotation:360, repeat:-1}) // add next tween as soon as 1 iteration of previous animation ends .to(".green", 1, {rotation:360}); See demo below where you don't need end() and recent() for this

Hi @Stagnax Welcome to the forum. The problem is that your tires have infinite repeat so the second timeline on the master will never play. There are multiple ways to handle this. You could add a position parameter to the second nested timeline on the master like this: Since the tires are just an infinitely repeating animation, you could set those up separately from the timelines and then your nested timelines would play sequentially. Something like this: Another option would be the method @Carl shows here: Hopefully that helps a bit. Happy tweening and welcome aboard.

A couple quick questions ... by the looks of it, this isn't a continuous scroll, but a scroll to a paragraph as it becomes available via the 0.25 second check. Is that right? Also, what is causing that 0.25 second check to fire every 0.25 seconds? It seems to be that the check for new content should be calculated by predetermined intervals based on the audio playhead position. A codepen would definitely help ... you can simply create an array of a sample of chunks to be brought in dynamically by some check at a regular interval. that way we can see how the Tweens are being applied to the elements or containers.

Hi Sabrid, Nothing that PointC's viewBox technique can really be applied to canvas as there is no viewBox or anything quite like it. You might want to look into Snap.svg Animator which allows you to export svg animations and art from Animate CC https://exchange.adobe.com/addons/products/12329#.WpghkhMbMUE There is also a video by CJGammon that shows a bit how it works out there as well. Once you export your Animate CC work as SVG then you will probably have some success animating the viewBox. I've never used Snap.svg Animator and it has nothing to do with GreenSock so we don't offer any support on how to set it up and use it but the github repo should have good instructions to get you started.

I checked the demo from the github page and I don't see this behavior while opacity is being animated. My guess is, this library gives you option for that smooth movement after scroll finishes and you probably have used it for opacity or misconfigured somehow or using some callback which is causing this side effect.

It occurs to me that if you applied it to multiple objects with different scaling amounts you could create interesting parallax effects such as a Dolly Zoom. https://en.wikipedia.org/wiki/Dolly_zoom

If I understand correctly, problem is you are missing target if text gets added while scrollTo is animating, right? You can get around that by recreating tween every time you add new text. Following thread had similar issue, it uses onUpdate call to tween using new target values but if you are not animating height(plus not really good idea for performance) of new text then just updating once should be enough.

The first step into the darkness... Already demons of failure assault me. The bar doesn't start moving until too late, the actual code doesn't seem to work outside the debug mode of codePen - I imagine it is their order of loading, the JS doesn't run until all the other elements have loaded and so, ruins this version of it. And this is already far more convoluted than I expected this to be... Let us see what the next room in this dungeon will bring. @PointC I thank you for the encouragement and the brownie points. You know I am keeping tabs on them and one day I shall come to your door collect. @Visual-Q Aye! A man has to got to do what a man has got to do. And nowadays, a man has got to do also what a woman has got to do. ps: Lovely comment on how you defer loading your background images. I never thought of such simple thing. Great to see others chip in with their ways of doing things. We all end up learning a thing or two.

Yeah - as @Carl mentioned, there isn't a viewBox for canvas. You can certainly zoom and pan all around canvas if you want though. A quick search on CodePen shows a few results. Maybe they'll give you some ideas too. https://codepen.io/search/pens?q=canvas zoom&order=popularity&depth=everything&show_forks=false Happy tweening.

Hi Daniel, great website As usual, it would be easier to find out exactly what's happening with a reduced test case. If you could create a small codepen using the React Spark Scroll library and GSAP to animate opacity of just one element on scroll, it would make it way easier to help you out. As it stands, I believe there isn't even a way to see the code you're using unminified, so it's quite impossible to find out where the issue comes from.

wait.... what?? Sheesh... how did I miss that little ninja nugget? That's pretty neat.

Yep - when you want a smooth, repeating rotation like that just use ease:Linear.easeNone and you'll be all set. Have fun and happy tweening.

Thank you so much. I see you've also smoothen the bicycle tire's rotation, I was looking for that. Once again thank you

Sure, you can check the reversed() value, but keep in mind that tweens/timelines can be nested as deeply as you want, so it can get a little tricky. If you've got a reversed timeline inside a reversed timeline, it's technically reversed but it'll APPEAR to play forward (because its parent timeline is reversed). Also, you can have a paused timeline whose playhead is being tweened by that ANOTHER tween (forward or backward). So in that case, it wouldn't even matter what the reversed() method returns. See what I mean? There are ways to get the value you want - it just depends on your scenario. Simplistic is just use the reversed() method, but if you've got the potential of any of those other scenarios, you could walk up the ancestor timelines and figure out the value accordingly or use an onUpdate to track direction. Lots of options.

Hello @SimonWidjaja and Welcome to the GreenSock Forum! Here is a link to the video and the docs page for ExpoScaleEase: Happy Tweening

Yeah, using canvas requires a little bit of setup. Another option would be scaling an outer element, and apply a counter scale to an image. It would at least perform better than animating width and height. One problem is that scaling in Chrome can be rather difficult due to bugs in will-change CSS property. This is all done using scaling. That's based on some stuff from this thread.

Yup, infinitely repeating animations definitely make it difficult to add things relative to the end of the timeline. All great suggestions so far. There are 2 methods of TimelineLite() that can be used together to bypass the need for labels, hard-coded offsets, function calls etc. in this scenario. recent() : Returns the most recently added child tween/timeline/callback regardless of its position in the timeline. endTime() : Returns the time at which the animation will finish according to the parent timeline's local time. tl.to(".red", 1, {rotation:360}) .to(".blue", 1, {rotation:360, repeat:-1}) // add next tween as soon as 1 iteration of previous animation ends .to(".green", 1, {rotation:360}, tl.recent().endTime(false)); http://codepen.io/GreenSock/pen/vLPxLq?editors=0010

Like, celli said, masks seem like a perfect fit here. I did something similar with DrawSVG to reveal a brush stroke: http://codepen.io/GreenSock/pen/YwawOX?editors=0010 For inspiration, here are some great "mask" tricks from Chris Gannon http://codepen.io/chrisgannon/pen/xGwybB http://codepen.io/chrisgannon/pen/QbVwNj http://codepen.io/chrisgannon/pen/BNmVxj http://codepen.io/chrisgannon/details/qOgjYR/n (there is a link to a video tutorial in details) http://codepen.io/chrisgannon/pen/bddQEz http://codepen.io/chrisgannon/pen/MwMpBQ http://codepen.io/elrumordelaluz/pen/bVKXvj http://codepen.io/chrisgannon/pen/bdaXMQ