Leaderboard

Yep - that's gonna depend on how you drew your path in AI. The two from your demo were drawn differently so they needed separate tweens. With open paths in Illustrator it's hard to tell which way it goes, but a little trick can help. Go into the stroke panel and add an arrowhead to the end of the path while you're working. If a path is backwards you can reverse it in the upper menu pull-downs. Object --> Path --> Reverse Path Direction. Then just remove the arrowheads before you export for SVG animation. Hopefully that helps. Happy tweening.

Happy to help. I'm glad to hear things are starting to click for you. As long as you're having fun with each() loops, here's a bit more info. All the animations don't have to be the same. Sometimes you may want that, but you may also want some variety. You can still have each() do the heavy lifting for you. Using each element's index allows you to create different animations. Here's a version where you can use the index and each 'y' position animation is different. You can also create entire animations and/or properties in arrays and plug those into the tweens based on the index. Here's a version showing the basics of how that's done. Hopefully that gives you some more ideas about what can be done with loops. I'm glad you're now obsessed with GSAP and moving from lurker to a more active status. It really does get more fun as you increase your forum participation. Have fun and happy tweening.

Hi @nicoladelazzari, That's the result of this special ease InOut. It starts very slowly. Try e.g. ease: 'Power4.easeOut' Best regards Mikel

Hi @exploitoholic Welcome to the forum. There may be a bit of a misunderstanding here. A nested GSAP timeline isn't the same as a nested composition in AE. A timeline is basically a collection of tweens. You can add any tweens to that timeline and manipulate any properties of any element. You can't animate properties of the timeline itself. You can do certain things to the nested timeline like timeScale(), pause(), play() etc. But you can't rotate or change the opacity of a timeline. All that is done with the individual tweens on that timeline. Does that make sense? Happy tweening.

Are you looking for more of a smooth pulse here? If that's the case, I think a Sine.easeInOut would probably work well. Here's a fork of your pen: I commented out the rotation and cranked the timeScale up to 10 so it's easy to see what's happening. Is that more the look you wanted? Happy tweening.

You can also target multiple elements with a tween as well if you want them to share the same animation, giving them a common class or assigning them to an array etc... to create groups of elements.

That'll come down to how you structure your HTML/SVG (or whatever you're animating). With an SVG, for example, you can use the <g> tag to wrap elements and target the child elements individually or as a group. Happy tweening.

@PointC Once again, thank you so much! Finally understanding the whole this/for each concept and it's blowing my mind. Going to save so much time in all future projects! Excited to learn more. From forum lurker, to gsap obsessed.

That's amazing - thank you !

Hi @Fábio Novais Is this what you need it to do? Happy tweening.

@PointC thank you for taking the time to do all of this man, you are far, far too kind. Going to delve into this later tonight

I'm not really sure what the question is here. Are you asking if GSAP and d3 can work together? I don't know much about d3, but there are some CodePen demos using both. https://codepen.io/search/pens?q=d3 gsap&amp;page=1&amp;order=popularity&amp;depth=everything&amp;show_forks=false

You can add the SplitText animation to the timeline that animates the blue box. That timeline is the same as creating one manually. You can add whatever elements you want, use the position parameter, add callbacks etc. The each() method just does the heavy lifting by looping through and easily targeting the child elements. So, in your example, you can create a a new SplitText from the <h2> in each project tile. You then add that SplitText stagger to the end of the timeline that animates the blue box into view and you'll be all set. Hopefully that helps. Happy tweening.

Thanks a lot. Really helped me out. ?

For a seamless rotation you can also set that rotation ease to Linear.easeNone Happy tweening.

In fact it is only for simple cases like hover, even knowing that you can use GSAP to do the hover, sometimes the css solves with simplicity and everything there at the time of stylization. But his explanation was very enlightening. Many thanks Jack, not only for the explanation but for developing a tool that is certainly is the revolution of web animations ❤️

This is interesting And, I think actually doing something a bit different (vs changing the cursor icon) could work well ... instead of changing the cursor icon you could 1. hide the cursor 2. tween the change of the menu icon while 3. tweening the position of the menu icon to the cursor position Here is a simple CodePen demonstrating the basics of this

You can animate flexbox with GSAP as long as the flexbox property value is not a keyword string. Also if you do choose to animate flexbox, keep in mind that flexbox has limitations, like requiring a specific height (even if added dynamically with JS) on its main flex container to animate properly. Sometmes using CSS Grids is a better option than CSS Flexbox, but it all depends on your animation goals

You can't animate most flexbox values because they're words, e.g. flex-start, space-around, column-reverse. You can't say, animate to column reverse. The browser has to do the layout. But that's actually a good thing as that's one less thing you have to calculate. To do a flexbox animations, start off by recording the position of your element in it's current state. Now change its flexbox style and let the browser reposition it. Now record the new position of your element. You now know where the element was, and where its supposed to be. Now move your element back to it's old position and animate it to it's new position. This all takes place in between animation frames, so you won't see the jump. This technique will work for every flexbox property. It will actually work for any type of layout that the browser handles, like the new CSS grid. For more information, check out these threads.

It's possible to animate flexbox properties with a little work... http://codepen.io/osublake/pen/dMLQJr?editors=0010 That is based on a technique that I call relative animations. Here are some simple demos that use that technique. http://codepen.io/osublake/pen/JYwRMa http://codepen.io/osublake/pen/eJGrPN http://codepen.io/osublake/pen/QjQGBa And a visual demonstration of what's going on... http://codepen.io/osublake/pen/gavGdL And here's an advanced version of that technique animating text... http://codepen.io/osublake/pen/mepBam?editors=0010 Animating the x and y position of an element is pretty easy, however, width and height are not. It requires nesting elements, and detecting changes. I just copied most of the code from the first demo I linked to and added it to your example. When you click the change button, it changes the font-size of the parent node, and triggers the layout animations. A simple demonstration of what you were asking. The jitter is due to what Jonathan explained above. Font-size just doesn't animate that well. Scaling from the largest font-size would be a much better approach. http://codepen.io/osublake/pen/c6e891ec62778a19ffcfa3c0ce0dad58?editors=0010 .

Great stuff, Blake. Just in case people need a little more info on how normalize() and clamp() work here is a reduced demo with some comments // normalize will return a value between 0 and 1 function normalize(value, min, max) { return (value - min) / (max - min); } // 40 is half-way between 30 and 50 // value, min, max console.log(normalize(40, 30, 50)); // return 0.5 //clamp forces a value into a range function clamp(value, min, max) { return value < min ? min : (value > max ? max : value); } //35 exceeds the max of 20 so it gets clamped to 20 //value, min, max console.log(clamp(35, 0, 20)); // return 20 http://codepen.io/GreenSock/pen/PzLzoJ/?editors=1011

There was a topic posted a couple of weeks ago about not using ScrollMagic... http://greensock.com/forums/topic/14870-do-i-need-scrollmagic-to-use-gsap/?p=63860 I'm sure ScrollMagic is a great product, and I'm not trying to convince anybody otherwise, but this can be solved in 1 line of code. This normalizes the scroll value to a value between 0-1, a ratio. var progress = (scrollValue - min) / (max - min); Normalizing a value is key to figuring out most animation problems. Here are two different ways you can get the normalized value. Using scroll position... http://codepen.io/osublake/pen/c0d284a89ae1d15d5ec12ba4c9ee8f6b?editors=0010 Using client rect... http://codepen.io/osublake/pen/314e9c6f80001fd19dd0bf68d8fc292c?editors=0010

Hello qarlo, and Welcome to the GreenSock Forum! You can check out this http://codepen.io/bassta/pen/jPmRWV But basically for more complex parallax scrolling, ScrollMagic is the best option since it is a scrolling manager for complex scene parallax scrolling management. Under the hood ScrollMagic uses GSAP as its animation platform.

Remove the () from function name so it doesn't fire right away. Good TweenLite.to(peopleContainer.peopleHdr, .5, {y: (peopleContainer.peopleHdr.y+75), alpha:1, overwrite:3, onComplete: toggleVisibility}); Bad TweenLite.to(peopleContainer.peopleHdr, .5, {y: (peopleContainer.peopleHdr.y+75), alpha:1, overwrite:3, onComplete: toggleVisibility()});