Leaderboard

To get each circle to move on its segment of the path is pretty advanced. You could create a custom svg path segment for each circle that controls how far it should move and hide it on top of the visible path. Another approach is that you can make each ball tween along the same full path and then tween the progress of each of those tweens. So 1 circle could animate on the first 50% of the path or another on the last 50% or another on the middle 50% of the path.. Keep in mind this is a very advanced concept and pretty much requires that you've experimented with the GSAP API for a few weeks. I really can't explain it all in proper detail but here is a demo: var tl = new TimelineMax({paused:true}); //create unique path data for each circle var bezierData1 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle1"}); var bezierData2 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle2"}); var bezierData3 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle3"}); //apply to all circles tl.set("circle", { xPercent:0, yPercent:0}); var circle1tween = TweenMax.to("#circle1", 1, {bezier: {values:bezierData1, type:"cubic", autoRotate:70}, ease:Linear.easeNone, paused:true}); var circle2tween = TweenMax.to("#circle2", 1, {bezier: {values:bezierData2, type:"cubic", autoRotate:70}, ease:Linear.easeNone, paused:true}); var circle3tween = TweenMax.to("#circle3", 1, {bezier: {values:bezierData3, type:"cubic", autoRotate:70}, ease:Linear.easeNone, paused:true}); //create a timeline that tweens each tween to and from unique progress values var tl = new TimelineMax(); //red tl.fromTo(circle1tween, 4, {progress:0}, {progress:1, repeat:-1, yoyo:true, ease:Power0.easeNone}) //green tl.fromTo(circle2tween, 2, {progress:0.25}, {progress:0.6, repeat:-1, yoyo:true, ease:Power0.easeNone}, 0) //blue tl.fromTo(circle3tween, 3, {progress:0.3}, {progress:0.8, repeat:-1, yoyo:true, ease:Power0.easeNone}, 0)

Hi, Just for fun ... Happy pathDataToBezier ... or somethinmg else. Mikel

Hi @LeoZ, sorry, I was a little too fast. Your point was to animate several objects along the path. Here's a great example of @OSUblake: Best regards Mikel

I'd imagine there would be a number of ways to make it happen. Depending on the complexity you need, canvas would probably be a good solution. @Sahil has a neat canvas demo with some trails. @OSUblake has a cool one using SVG. Happy tweening.

Clone snowflake. Append cloned snowflake. Animate cloned snowflake. Rinse and repeat. jQuery clone - https://api.jquery.com/clone/ vanilla clone - https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode Your code looks similar to this demo.

Hi @nicoperso2 Welcome to the forum and thanks for being a member of Club GreenSock. There's certainly a lot to unpack in your post, but it sounds like you have a basic understanding of returning timelines from functions. For a deeper dive into the subject, I'd recommend you visit Professor @Carl's wonderful post on the subject before you continue with your project. https://css-tricks.com/writing-smarter-animation-code/ As far as sliders go, there are a multitude of ways to create them. A search of the forum for either 'slider' or 'carousel' will produce many threads and demos which should help. Hopefully that gets you started. Happy tweening.

Hi @smallio, I am not sure what exactly you want to achieve. Maybe the deep sleep has already brought a result. Here is a fork of a pen of @OSUblake - pen. Have a good start in the day ... Mikel

Please check the stagger type in the docs. https://greensock.com/docs/TweenMax/static.staggerFromTo() stagger: Number These are not the same. '0.4' !== 0.4 Try this. There is no need to specify an ease in the from object. TweenMax.staggerFromTo('.js-svg-roll', 1, { opacity: 1, rotation: -4, x: -32, }, { opacity: 1, rotation: 0, x: 0, ease: Back.easeOut.config(1.7), }, 0.4); This is also going to cause problems. .js-svg-roll { transform-origin: bottom left; } You should use GSAP to set transforms and any transform origins you plan to animate. https://greensock.com/forums/topic/19333-troubles-with-svg-animation-and-mastertimeline/?tab=comments#comment-89854

Hi @LeoZ, You should also think to align the circle ... Here QuickTip: Animation along a path //var bezierData = MorphSVGPlugin.pathDataToBezier("#motion-path"); var bezierData = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle1"}); Happy tweening ... Mikel

Problem is you are using a from tween, so as soon as you hover your element jumps to 10 pixels and animates back to 0. Also, you were using timeline and adding all those tweens to it even though you won't be reusing them.

? You guys are really amazing! I'm so thankful for everything! And yes its really motivating me to learn GreenSock in deep! Thank you so much, guys!

Yup, Mikel was exactly right about the align property. Another issue is that you have 3 circles with the same id (id="circle") ids must be unique so change your svg to use: id="circle1" id="circle2" id="circle3" Also since each circle exists in a different location in your svg you have to align each to the path to get the proper bezier data. var tl = new TimelineMax({paused:true}); //create unique path data for each circle var bezierData1 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle1"}); var bezierData2 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle2"}); var bezierData3 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle3"}); //apply to all circles tl.set("circle", { xPercent:0, yPercent:0}); //animate each circle along its own unique bezierData //start each animation 1 second after the previous tl.to("#circle1", 4, {bezier: {values:bezierData1, type:"cubic", autoRotate:70}, ease:Linear.easeNone, repeat:-1, yoyo:true}); tl.to("#circle2", 4, {bezier: {values:bezierData2, type:"cubic", autoRotate:70}, ease:Linear.easeNone, repeat:-1, yoyo:true}, 1); tl.to("#circle3", 4, {bezier: {values:bezierData3, type:"cubic", autoRotate:70}, ease:Linear.easeNone, repeat:-1, yoyo:true}, 2); tl.play(); Here is your example with a few modifications:

I was just about to ask the same thing. Your screenshot showed three divs next to each other, but the pen has three 100% width/height divs and tweens with delays? I'm confused about the end result. Are you trying to stack divs on top of each other? Also, as @GreenSock mentioned, I'm not seeing anything broken. More details would be most helpful. Thanks.

I'm confused - are you saying that your codepen doesn't work in Chrome? I don't see anything that's broken, but I'm probably missing something. Can you provide more details about exactly what is supposed to happen (that isn't)?

Extensions are published by Google/AMP Project, so it's not something GSAP could just make. They are working on an Animate CC extension, so there is a possibility that they might allow an animation library if it meets their guidelines.

Precisely this, aha Funnily enough this was the pen that I was trying to find... it's buried somewhere on my codepen likes! Thank's for the help @mikel

When you define a from tween, GSAP will set your element to that position and animate back to original position. So for example if your element is at 0 and you create a from tween with value of 100, GSAP will set your element to 100 and animate back to 0. If while creating the tween if element was at 50, then GSAP will animate from 100 to 50. If it was already at 100, then nothing will happen because start and end positions are same. I removed each because it was unnecessary. You can still use each and it will work. Also, with GSAP you don't need anything like jQuery's stop. GSAP overwrites any tweens for same property of the element by default. You can change the overwrite behavior if you ever need, check the docs. https://greensock.com/docs/TweenLite You can visit the learning page and youtube channel to get familiar with GSAP API, https://greensock.com/learning https://www.youtube.com/user/GreenSockLearning

You just need to pause the timeline so it won't autoplay and get in the way. Does that help?

Hey everyone We’re rolling up on Thanksgiving here in America, so I thought I’d say how thankful I am for this forum. You’re a terrific group of people and one AI. I’m so glad I started participating a few years ago. It’s truly been life changing. As a thank you, I’m gonna drop a couple sliders here for the community. I know there are umpteen ways to make a slider, but this is my take on it. I added multiple control types and linked the nav dots animation to the draggable element for a bit of fun. We often have questions about sliders so hopefully these will be a good jumping-off point for someone. Happy Tweensgiving

@jesper.landberg no doubt I'll catch it on Awwwards all the best man!

Thanks, appreciate it:) If you like those stuff i will probs like my next prod that is going live within a week or so, pretty proud of it:) Smoother than ever!:P

Another great thread! @jesper.landberg Love your work man Seen a few things on codepen recently... not to mention how juicy the Asaro site is!

Thanks! You saved my day.

It's difficult to troubleshoot with just a screengrab. Do you think you could put together a simple demo that demonstrates the problem? Thanks.

When something doesn't work check developer console by hitting F12 to see if you are getting any errors. Your demo was missing jQuery, you can add that from codepen settings. Feel free to post GSAP related questions.

I think issue has to do with ScrollMagic and how it handles tweens that are animating same property that conflicts. ScrollMagic is not GSAP product, you should try posting issue on Github. https://github.com/janpaepke/ScrollMagic Alternate solution would to use fromTo tweens, with immediateRender disabled on all tweens except first one. And setting duration on your scenes, you will notice jumps because your element animates 400 pixels but you are scrolling only 300 pixels. A better solution would be to use enter/leave events to create new 'to' tweens inside the event handler so there won't be conflicts. When you define a to tween, GSAP will animate element from current position to the target position, so when you scroll and refresh all wrong values get recorded and create conflict. When you define from tween, GSAP will animate from given position to current position. But by default immediateRender is set to true so GSAP will set your element in that position that's why you need to set it to false on 2nd and 3rd tween.

Those values get passed as string. You need to create JSON string and parse it. <div data-from='{"yPercent": "0", "rotation": "0"}' data-to='{"yPercent": "-100", "rotation": "5", "ease": "Expo.easeOut"}'> const from = JSON.parse(el.dataset.from); const to = JSON.parse(el.dataset.to); Double quotes are important, if you don't want to use quotes, you will find some stack overflow threads with regex solutions. You can also encode JSON string from server in PHP, there will be equivalent solutions for other languages.

Hi @greykrav, It's BlackWeekend ... Best regards Mikel

Hi @Noturnoo ! Sorry I just saw this thread now, did you archive your goal? It was me who developed the Asaro site including the slider ur referring to.

Hi, Besides @mikel's great solution for this you can see this sample I made of an endless marquee in React using the modifiers plugin. It shouldn't be too complicated to port this to Vue though and using Draggable to control the position of the elements:

The secret to great morphs (or any animation really) is to take the time to properly prepare your assets. Look at your demo without any morph running. Set the visibility of the #grey to visible and hide the #map. See how that doesn't look like a finished graphic? I think you're looking for a bit much from the morph plugin here. I saw your other question on the thread I mentioned and @GreenSock gave you some good advice there about path to path or concatenating the "d" values. You could also morph the map to the main part of the logo and then draw the outer ellipse separately. When you start morphing highly complex paths, you probably won't get the morph you're envisioning. You'll most likely want to break this into pieces to get the best result. You said you weren't experienced with AI so I'd recommend taking some time to get familiar with it. With proper preparation you can make it look like one piece morphs into multiple shapes. Here's an old demo from another thread, but it shows the basics of a square morphing to/from three circles. If you have a bunch of shapes, you can create a loop to go through them. Here's an examples of that. The bottom line here is the MorphSVG plugin is amazing, but you should always do your best to help it as much as possible. That all starts in your vector software. Happy tweening.

Hi @tsimenis, Since the cracks still dream of Thanksgiving ... Here, my suggestion // alternative list, if you want the "1" on the first left position list: ["10", "1", "2", "3", "4", "5", "6", "7", "8", "9"] // left: -itemWidth TweenLite.set(this.$refs.list, { left: -itemWidth }) Best regards Mikel

Hi @merchantcantos Welcome to the forum. Edge is super duper fussy when it comes to masks. (& many other things) The main thing to try with Edge when you have a drawSVG mask is to add a tiny rotation that will force Edge to draw it correctly. I wrote about that here. Edge also doesn't like when you group things in a mask element. Another thing I always recommend is to mask a group rather than an individual element. Even if you only have one shape, I still recommend grouping it and masking the group. Here's a fork of your pen with those changes. It seems to be working correctly in Edge for me. Hopefully that helps. Happy tweening and welcome aboard.

You need to create paused timeline outside of events so you can play and reverse it on mouseenter and mouseleave. For gooey effect you need to use blur and contrast trick, check this https://www.youtube.com/watch?v=ZDFwBEXN0pM The ripple effect is SVG filters, feTurbulence specifically, https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence

That's close but in your case you are not using different strokes so you can do everything in render function to optimize further. TweenLite.ticker.addEventListener("tick", render); function render(event) { ctx.clearRect(0, 0, canvas.width, canvas.height); // set style and beginPath for (let i = 0; i < lines.length; i++) { // call draw function of prototype but don't stroke in prototype // to avoid stroke calls because you are not using different strokes // or draw lines here directly if you are sure you won't need to make changes // like randomizing stroke etc } ctx.stroke(); }

Hi @SergLine, The reveal of the shadow can be improved. Here's a workaround of @OSUblake, using CSS variables. Kind regards Mikel

Hi Celli, See fork below and where I added your code (in the HTML column of CodePen inside the fnStartAnimation function). It's just a copy and paste of your code but you can see around where you should add it. At that point, stuff is all loaded and everything animates just fine. You can make your own function for this particular purpose, just need to make sure the canvas is all set first.

You had it right if you're using the default HTML that it spits out. exportRoot.box was correct. However, you need to make sure the canvas is created, it's loaded, available in the timeline, and the right scope before calling it.

Hi @DesignCourse Welcome to the forum and thanks for joining Club GreenSock. The Learning Section and Blog here on the site are excellent places to start. https://greensock.com/learning https://greensock.com/blog/ Just reading the forum on a daily basis is an excellent education too. After that, melt your brain by visiting @OSUblake's CodePen profile. https://codepen.io/osublake/ Happy tweening and welcome aboard.

Hi and welcome to the GreenSock forums, Thanks for the demo! When tweening attributes like that it's important that the element already has an attribute with the values you are tweening and it has the same number of numbers. Please read the section "tween complex string values" here: https://greensock.com/gsap-1-18-0 in your SVG markup you had gradientTransform="translate(0,0)" but in you are trying to tween that value to "rotate(360, 250, 250)" which is much different and contains 3 numbers. I changed your svg to have <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse" gradientTransform="rotate(0, 250, 250)">

That'll depend on how you want to set up your CSS. Maybe something like this: How you handle it is entirely up to you. If you have other GSAP related questions, we'll be happy to assist. Happy tweening.

You can study @OSUblake's demos from following thread on how to speed up and slow down based on path. You can set viewport based on current x translate of car to create camera like effect of following. You can get x position of car using car._gsTransform.x. But make sure the initial position of car is at 0, 0 in your SVG so you won't need to do additional calculations to get exact position of car. There is another advance demo by Blake, I don't think you need that but here is the link,

Your spans have white background so they weren't disappearing just you couldn't see them. toggle-btn had typo in css so it wasn't getting position fixed. The menu is visible on mobile because you were animating to -100% but your element had height 100vh, so it would stay in viewport because whatever '100%' is, it was less than 100vh. You should avoid animating height, width, top, left etc because they trigger layout repaint, animate transforms instead whenever possible because they take advantage of GPU and perform better. So your animation can be achieved animating yPercent instead of top. You can learn more about animating transforms, https://greensock.com/docs/Plugins/CSSPlugin

It's telling you that tl is not defined because you have masterTl in your function. //switch this var masterTL = new TimelineMax(); tl.to(trail, 2, {alpha:1, rotation: 360}); return tl; //to this var tl = new TimelineMax(); tl.to(trail, 2, {alpha:1, rotation: 360, transformOrigin:"center center"}); return tl; Make that change and you'll be good to go. Happy tweening.

There would be several ways to make that happen. If you perform a search of the forum for 'infinite carousel', you'll find plenty of threads and demos to get you started. Here's a good example. PS We're always happy to help with your GSAP related questions, but please don't re-post your question again on an unrelated thread after waiting only an hour for a response. The forum is fairly quiet on the weekends so you may not always receive an answer as quickly as you'd like.

Concerning your first question about library overlap, look at what I wrote about ScrollMagic in my previous post. I have always claimed that ScrollMagic isn't needed, and it isn't. You can do the same exact thing by specifying the scroll position for an animation's time/duration. Nothing magical.

Hi @SimonDucak Animated handwriting is a bit tricky. I know the effect you're trying to achieve, but drawSVG only works with strokes - not fills. You have a couple options. The easiest would be to create a mask for the text and animate the stroke of the mask to reveal the filled path. The other option is to create an open path that looks like the actual font. I wrote a couple posts on CodePen about how to create a handwriting effect. You may find some of the info useful. https://codepen.io/PointC/post/animated-handwriting-effect-part-1 https://codepen.io/PointC/post/animated-handwriting-effect-part-2 Here's the demo I made as part of those posts. Hopefully that helps. Happy tweening.

Thanks for your input Mikel. I've finally got something working from output to SVG. I'm learning about SVG code as I go here, so far with SVGs I've only ever output them for web as static (non-animated). My artwork had to be completely reworked. Initially I had fills from creating outlines from typeface, of course those don't work at all. Then from the fills I deleted the inner outline of the inner & outer outlines, and used the 'Align Stroke to Inside' as the stroke which created 'path' elements in output to SVG code. Still didn't work. Must not have liked Align Stroke to Inside. Then I completely reworked the artwork with stroked shapes (no fill) with Align Stroke to Center, and that finally works. I created each stroked shape the same way, however the smallest shape is a 'path' and not a 'rect' for some odd reason. In the output to SVG it made the two bigger shapes 'rect' elements and the smallest one a 'path' element. Quirky. Is there a 'path' to 'rect' element converter? I can choose "rect, path" as the elements but I'd rather have the smallest shape a 'rect' as well. Anyone have this problem with output? Is there a problem with it the way it is in the current pen? Also, why don't I have a Run button in my Codepen account? It will show here in this forum, but not on the pen in Codepen. Just refresh the page to see the animation again for the time being.

Just to expand a bit on Carl's good information here: A quick tip for reversing path points in Adobe Illustrator. Open path: select the pen tool and click on the first point of your path and it will reverse the points. Closed path: right click the path and make it a compound path, choose menu-window-attributes and then use the Reverse Path Direction buttons. (Note: If the Path Direction buttons are not visible in the attributes panel, click the upper right menu of that panel and choose 'Show All')