PointC

Hi mik Welcome to the forums. It looks like the overlap of your two staggers is causing some issues on restart of the timeline. The fight for control of elements scale: pulse.staggerTo(circles.children, 1, { cycle: { scale:[1.2, 1.3, 1.6] }, transformOrigin: "50% 50%" }, 0.15 ); pulse.staggerTo(circles.children, 0.5, { scale:1, transformOrigin: "50% 50%" }, 0.2, "-=0.75" ); // change to "-=0.25" and it works fine By reducing that overlap a bit ("-=.25"), you can get the pulse animation you want and not cause issues on restart. I've forked your pen with that change and switched the event listener to a mouseenter instead of a mouseover. I've also added an additional event listener which uses the isTweening() method to prevent the animation from restarting until it's finished. That may or may not be of use to you on your project, but I use it quite a bit to prevent clicks/hovers from triggering certain animations until the current animation finishes. http://codepen.io/PointC/pen/VeNwLz/ Hopefully that helps a bit. Happy tweening and welcome aboard. Edit: looks like Zach beat me to it. Our answers are a bit different though so you'll have options.

Hi innocean_dev Welcome to the forums. I'm not sure I completely follow your question, but scaling a DOM element should not change the overflow property of another element. I don't know how you've set up your button, shine and other elements, but if overflow is changing upon tweening the scale, there is certainly a way to stop it from happening. To get you the best answers we really need to see a demo of your code. If you could make a CodePen showing the behavior, everyone will be more than happy to assist you in solving the problem. Please follow this link to learn more about making a CodePen: How To Create A CodePen Demo Thanks and welcome aboard.

o.k. - I see what you need now. You can just use a loop. Please change your pen to this: var tl = new TimelineLite(); for(var i = 0; i < 60; i++) { tl.to(".box", .1, {y: "-=7",x: "+=5px"}) tl.to(".box", .1, {y: "+=7",x: "+=5px"}) } http://codepen.io/PointC/pen/QyoMYO/ Hopefully that helps a bit. Happy tweening.

Very nice Carl - I like that. I don't often use infinitely repeating tweens on a timeline, but when I do, that method could be quite handy. It always amazes me how much thought, care and detailed effort has gone into this platform. So cool.

Thanks violacase. Those books in my demo are the unauthorized biographies of Blake, Jonathan and Diaco. It's all top secret so don't tell them.

Great info Jack. I can imagine a group to group morph would be a crazy complicated undertaking. This plugin is so incredible and my absolute favorite. I'm still trying to put my brain back together after my mind was blown the first time I saw it.

Hi Clms You're right - converting multiple paths into one will result in fill color change difficulties. I'd recommend just going the brute force route and have a tween for each startPath to each endPath. You'd then end up with: .to("#startPath1", 1, { morphSVG:"#endPath1", fill:"newFillColorIfNeeded" }) .to("#startPath2", 1, { morphSVG:"#endPath2", fill:"newFillColorIfNeeded" },0) // and so on You mentioned 30-50 paths so it isn't really that many lines of code. This method will give you the most control over all aspects of the morph. You can control the start and end fill colors of each piece, stagger the morph time of each piece and control easing for each individual morph if so desired. By grouping the start paths, you can also control it as one piece too. This is a pen I made in answer to another forum question, but it shows the basic idea: http://codepen.io/PointC/pen/yeRXRx Hopefully that helps a bit. Happy morphing.

Hi Kathryn , You're really close. Just switch this .set(blah, {attr:{cursor: "default"}}); to this: .set(blah, {cursor: "default"}); and it works as expected. http://codepen.io/PointC/pen/KVJaGa

Hi Anas7 , Welcome to the forums. You can certainly reverse a timeline on click. I'm not sure how your code is currently set up, but here's a pen showing a menu icon playing and reversing on click: http://codepen.io/PointC/pen/jWWdWb/ If you'd like specific answers about your project you can make a CodePen so everyone can see your code in action. This is the best way to get great answers from others. Here's how to make a pen: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that helps a bit. Happy tweening and welcome aboard.

Hi tpav Welcome to the forums. I'd probably just put that infinite tween into a function and call it after the red box animates. I made a fork of your pen with that solution: http://codepen.io/PointC/pen/KVbjKd/ I wasn't sure if the green rotation was supposed to wait for the first revolution of the blue square or not so I put in a 1 second delay for the green square rotation. Hopefully that helps a bit. Happy tweening.

You're welcome - I'm happy to help. Glad to hear that you're enjoying GSAP - it really is a fantastic platform and this forum is the best on the web. Happy tweening.

Carl & Jonathan - thanks very much for the kind words. @caemostajo I've made another pen to help you understand this behavior a bit better. There are two timelines and two SVGs that are nearly identical. The first one has a shape in each corner and you can see the morph target not only assumes the shape, but the positioning of the new path. The second one is the same except all paths are centered so you get a morph with no position changes. I've also added a toggle so you can see the silhouette of the morph paths that the square is changing into. http://codepen.io/PointC/pen/LGMaoa/ Hopefully that helps you with a further understanding of what's happening with the paths. Happy morphing.

Hi caemostajo Looks like you're having some fun starting to use the morph plugin. Your pen is using three different SVGs of varying sizes which is causing some issues here. You can certainly use paths in separate SVGs, but I personally prefer to use one SVG with multiple paths to get the easiest and best results. I also see two morphs happening at once and I wasn't sure if that was your desired outcome. Is the #axe supposed to morph into the #dot and then into the #brush? I assume that's what you wanted as you mentioned multi-path in your question. I'd recommend creating a single SVG and put your paths at the desired ending point even if they overlap or sit on top of each other. Then, when you are ready to morph, you set the visibility of the path(s) to which you're morphing - visibility:hidden. This allows your starting path to remain visible and take on the shape and position of the morph path(s) I have a demo pen that shows a triangle, square and circle all morphing while jumping here: http://codepen.io/PointC/pen/yejGvb To see how the paths all sit on top of each other, just delete line 11 of my CSS and play the animation. Hopefully this makes sense and helps a little bit. Happy morphing.

Hi gcooke Welcome to the forums. I'm not sure I completely follow your question. It sounds like you're trying to do a bouncing ball type of effect, but your code above is showing three different elements and a duration of 40 seconds so I'm not quite sure. If it is a bouncing ball effect you're looking for, here's an excellent post: http://greensock.com/forums/topic/12741-how-to-animate-a-bouncing-ball-effect/ Here's a great bouncing CodePen by GreenSock: http://codepen.io/GreenSock/pen/4db89a13f37bcb953f38c3ba00b60706 The easiest way to get the best answers would be to provide a CodePen so we can see your code in action. Here's how to do that: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that gets you started, but as I mentioned, a demo would be great. Happy tweening.

Hi spacewindow , In answer to your sub question - yes you can target points. These GreenSock pens should be of use to you: http://codepen.io/GreenSock/pen/gPGOxL http://codepen.io/GreenSock/pen/MaabXe/ Check out this blog post as well (Tween complex string-based values section) http://greensock.com/gsap-1-18-0 Hopefully that helps a bit. Happy tweening.

That's a cool tip Carl. I've never used negative numbers to play from the end like that. Makes perfect sense, but I've never done it. I'll put that in the "I've learned something new today" folder.

Hi teamcolab , In addition to Jonathan's great advice, you can also add a label during the testing process (just move it where you need it as you're designing), pause the timeline and play() from that point. The code would look like this: tl = new TimelineMax({paused:true}); tl.to(element,2, {x:400}) .to(element,2, {x:400}) .add("testingLabel") .to(element ,2, {x:400}); tl.play("testingLabel") Here's a really simple CodePen to show it in action: http://codepen.io/PointC/pen/GoPNwP Happy tweening.

Nice solution Acccent.

Hi caemostajo , Welcome to the forums. Dipscom is right - the overlap is causing some issues here. In particular, the code below shows an overlap of the opacity on the wave path animation. If you remove that overlap (in both wave sections) your pen runs correctly on restart(). .to("#wave", 0.4, {scale:3 ,opacity:1, transformOrigin: "50% 50%"}, "-=0.1") .to("#wave", 0.2, {opacity:0, ease: Expo.easeOut}, "-=0.2")// remove "-=0.2" and it all works as expected I'd also agree that since your second section is the same as your first animation, this is a perfect situation to create a timeline in a function so you can reuse it again. Here are a few posts with some good reading about this process: http://greensock.com/forums/topic/12361-using-functions-to-build-a-timeline/ http://greensock.com/forums/topic/12643-master-timeline-and-the-use-of-functions/ http://greensock.com/forums/topic/13650-controlling-main-thread/ Also be sure to read the blog post and watch the video about the position parameter - it's great! http://greensock.com/position-parameter Hopefully this helps a bit. Happy tweening and welcome aboard.

oh sure Jonathan and Zach - go the extra mile and make new CodePens. Now my answer just makes me look lazy. Nice work guys.

Hi htwinam , Welcome to the forums. You could make that happen. You'd just need to use the vanilla JavaScript equivalent wherever jQuery is being used in Diaco's pen. This site should be quite helpful to you moving forward with your project: http://youmightnotneedjquery.com/ Hopefully that helps a little bit.

Animation/Workflow tip: Don’t forget - you can animate the viewBox attribute I don’t see this technique in practice (or talked about) very much, but sometimes it may be a better solution than trying to scale elements and center them. To illustrate this easy, but powerful method of SVG animation, I’ve made a simple house tour complete with some GreenSock home décor and a few nods to our great moderators. Take a look: http://codepen.io/PointC/full/OMabPa/ Some additional detailed tips about this process: How do you know the coordinates to use for the viewBox animation? Using Adobe Illustrator, you can simply view the entire SVG and hover over your desired areas for the viewBox and note the coordinates from the info panel. You can also add a square/rectangle over the area(s) you wish to zoom (make it transparent with a dashed border) and then use the coordinates of that shape as your viewBox data. You can even leave the rectangle/square in place during the animation process so you know you’re hitting the right target and then delete it before releasing the SVG into the wild. Keep aspect ratio in mind when using this technique If you start with a square (1:1) SVG, you’ll experience the best results if the areas to which you are cropping/zooming are also square. Likewise, for any rectangular areas - maybe start with a 2:1 ratio and zoom into areas that are also close to that as well. You can certainly zoom/crop to other ratios as seen in my simple demo above (two rooms are square like the SVG, but two rooms are rectangular), but it’s something to keep in mind. Also note that by changing the aspect ratio and/or cropping too close to the edge of the SVG, you can end up with some unwanted white space. As usual, IE hates SVGs You have to remember to set your SVG to overflow:hidden when animating the viewBox attribute in IE or goofy things will happen. Responsive sizing for static web delivery too You don’t necessarily have to animate the SVG viewBox either. Using different viewBox sizes, you can also show different sections of your SVG for different screen sizes. Show the whole thing to desktop users and crop to the most important part for mobile delivery etc. Finally, go big or go home Start with the biggest size you think you’ll need for your SVG. IMHO this goes for any SVG, not just those with a viewBox that will be animated. In my experience, you’ll encounter less trouble scaling down than scaling up. Hopefully this gives everyone some new ideas. Happy tweening.

Hi celli , Sorry - I had to be away from my computer for a bit and didn't have a lot of time to look at it again. Looks like you found a good solution though. I'm not sure why the math doesn't work on your other version, but like you said, maybe someone else has done this effect with more success and can post some thoughts. I've been doing some parallax effects for some galleries recently, but I've been using absolutely position elements and animate the background position along with a clip animation which woks quite well. Anyway - I'm glad you have a working solution.

o.k. - please see if this is more what you need? http://codepen.io/PointC/pen/PZyVQr/ Edit - nope - my mistake - that removes your parallax.

Hi celli , You're exactly right - you just need to adjust the y position. I was able to compensate for your offset by changing your tween to this: TweenLite.to(window, 2,{scrollTo:{y:position1-375}, ease:Expo.easeInOut}); Once I made that change, everything looks right to me - you should get the correct stopping point while retaining the parallax effect.