PointC

Hi carleaql Something you could try would be to add easing to each part of your morph. Since you have a linear ease on your pen, it seems to stop and start into the next move rather abruptly. By adding a simple in/out ease to each step you can have a little more organic looking animation. You can play with various Powers until you find one that you like. It's not perfect, but might work for you. Here's a fork of Carl's pen. I just duplicated the SVG and timeline so you could see a side by side comparison of the difference. http://codepen.io/PointC/pen/wzkEzr/ Hopefully that helps a bit. Happy tweening.

This looks like a duplicate post so I'll lock this one. Carl provided an answer here: http://greensock.com/forums/topic/15331-draggable-with-snap-swipe-scroll-section/

Hi pauljohnknight Looks like you're targeting the entire svg instead of the path. You can correct that by making the following change: //switch this var mySVG = $('#svgTwo'); // to this var mySVG = $('#svgTwo path'); Everything should work correctly with that change. Happy tweening.

Yep - the x was being ignored. That's the point I was making in Post #3 above, but I didn't specifically describe what the problem was. Sorry about that. Happy tweening.

Hi axe-z Welcome to the GreenSock forums. If you like to learn be reviewing code, I'd suggest taking a look at the GreenSock Collections on CodePen. http://codepen.io/GreenSock/collections/popular/ As far as more advanced demos, there are a lot of talented people to follow on CodePen. Please take a look at some of the best: Blake Bowen http://codepen.io/osublake/ Sir Jonathan Marzullo http://codepen.io/jonathan/ Chris Gannon http://codepen.io/chrisgannon/ Sarah Drasner http://codepen.io/sdras/ Diaco http://codepen.io/MAW/ Hopefully that helps a bit. Happy tweening and welcome aboard.

Hi qarlo Please try a little change in your tween: //switch this .set('.one', {css: {visibility: 'hidden'}, x: 100}) //to this .set('.one', {visibility: 'hidden', x: 100}) Making that change should give you the desired outcome. Please keep in mind that you can't animate visibility. It's either hidden or visible. As Jonathan suggested, please use autoAlpha or opacity. Happy tweening

well... bummer I thought maybe that would help. I'm not much of an expert with the SplitText plugin so please stand by. Someone should be along shortly with some more information. Happy tweening.

Hi senna The problems you're experiencing mainly come from the CSS. I set your parent container to a height of 100vh so the other divs know what 100% height means. The slides should use absolute positioning rather than a float. Then position them at left: 0,25%, 50%, and 75% of their parent container so they're ready to scroll into view. Here's a fork of your pen that looks like it's working properly to me: http://codepen.io/PointC/pen/JROqEA/ Just my 2 cents worth here, but I'm not sure ScrollMagic is the best choice for this animation. It can certainly work, but you should take a look at a couple of Diaco's demos to see other approaches that offer more flexibility: http://codepen.io/MAW/pen/XmozON http://codepen.io/MAW/pen/yYradO Hopefully that helps a bit. Happy tweening.

Hi george_43841 Welcome to the GreenSock forums. Your question reminded me of another thread about using emoticons with SplitText. Perhaps it could be of some help: http://greensock.com/forums/topic/13427-emoticons-in-splittext/ Happy tweening and thanks for being a Club GreenSock member.

Ha! "Kim Jong Dipscom" is awesome! As the Old Klingon Proverb goes: "Revenge is a dish best served cold."

I made a CodePen once where that feature would have been nice, but in the real world I'd tend to agree and say this would be something only a few would use on a regular basis. Just my 2 cents worth though.

Hi redrooster Since you will have several of these, I'd recommend jQuery each() to create a timeline for each element which can be played on hover. You mentioned not needing the animation to reverse on mouseout so I used a mouseenter instead of a hover. I also added an isActive() check when the mouse enters the div so the animation won't start over with rapid hovers in/out. Finally, I added a data div to indicate the index of the element you just hovered over. Here's a fork of your pen with my solution: http://codepen.io/PointC/pen/ALbpPb/ Hopefully that helps a bit. Happy tweening.

Hi bomortensen Welcome to the GreenSock forums. The easiest way to animate a dashed line with the drawSVG plugin is by using a mask. I wrote about that technique in our ongoing 'SVG Gotchas' thread here: http://greensock.com/forums/topic/13681-svg-gotchas/?p=57942 Hopefully that helps a little bit. Welcome aboard and thanks for being a Club GreenSock member. Happy tweening.

Hi senna You're just missing one file. Please add this to your pen: https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js That should get you working correctly. More info on that plugin can be found here: http://scrollmagic.io/docs/animation.GSAP.html Happy tweening.

Hi Nickzilla SVG circles always start at the 3 o'clock position so you'll need to rotate it by -90 degrees. You could do that by transforming the circle like this: <circle class="circle-fill" cx="50" cy="50" r="40" transform="rotate(-90 50 50)" stroke="blue" stroke-width="4" fill="none" /> or rotate the entire SVG like this: TweenMax.set("svg", {rotation:-90}); Hopefully that helps a bit. Happy tweening.

Hi sirhclluk You just need an onDrag callback to control the progress of the timeline. I didn't have time to make a CodePen for you, but please check out this thread: http://greensock.com/forums/topic/11161-control-timeline-through-rotation-draggable/ Rodrigo has a nice CodePen in his answer. That should get you started. Happy tweening.

Hi hopekim511 Welcome to the GreenSock forums. The stagger methods are used to create the same animation for each element (or different using cycle) and offset their start times. I don't think there is a way to use cycle for the duration. You'd be able to accomplish your goal with a loop and then use the index to create incremental or random values for the animation. Something like this: $(".box").each(function(i, element){ TweenMax.to(element, i + 0.5, {x: (i+1) * 100, delay: i * 0.1}) }) http://codepen.io/PointC/pen/EgWNqy/ Hopefully that helps a bit. Happy tweening.

Hi elbenja Welcome to the GreenSock forums. You could use stagger on that, but it won't give you the endless/seamless loop you're probably looking for. You'd do that like this: tl.staggerTo('.st0', .3, {morphSVG:'#step1', stroke:'#005F8F', opacity:1, ease: Power0.easeNone}, 0.3) .staggerTo('.st0',1.2, {morphSVG:'#step2', stroke:'#FF1783', strokeWidth:5, ease: Power0.easeNone}, 0.3, 0.3) .staggerTo('.st0', .3, {morphSVG:'#step3', stroke:'#FF298D', opacity:0, strokeWidth:6, ease: Power0.easeNone}, 0.3, 1.5); Here's a fork of your pen with that possibility: http://codepen.io/PointC/pen/GjqKoz/ I'd recommend using jQuery each() and create an infinitely repeating timeline for each element. You can then stagger the start times using the index of the element. That would get you the endless animation like your original with the 6 separate timelines. Like this: $(".st0").each(function(i, element) { var tl = new TimelineMax({repeat:-1, delay:i*0.3}); tl.to(this, .3, {morphSVG:'#step1', stroke:'#005F8F', opacity:1, ease: Power0.easeNone}) .to(this, 1.2, {morphSVG:'#step2', stroke:'#FF1783', strokeWidth:5, ease: Power0.easeNone}) .to(this, .3, {morphSVG:'#step3', stroke:'#FF298D', opacity:0, strokeWidth:6, ease: Power0.easeNone}); }); Here's a fork of your pen with that solution: http://codepen.io/PointC/pen/XjKApg/ Hopefully those possibilities help a bit. Happy tweening and welcome aboard.

Hi essentialtoils You just have a small typo: // please switch this MenuAnimate.to(MorphFrom, 0.2, {morph:MorphTo}, 0); // to this MenuAnimate.to(MorphFrom, 0.2, {morphSVG:MorphTo}, 0); That should get you morphing. Just an FYI - adding questions to a thread that is already marked 'answered' can sometimes get overlooked. It's usually best to start a new topic for your questions. Happy tweening.

Another fix for those weird little pieces is to set a miter limit: stroke-linejoin: miter; stroke-miterlimit: 1; Happy morphing.

Hey swampthang Isn't this a scope issue? You're declaring your gp variable inside your doRotate() function, but trying to access it in your clearVars() function. I think making gp a global variable should make things work correctly for you. Hopefully that helps. Happy tweening.

Hi Robert Wildling Welcome to the GreenSock forums. I'd recommend using a timeline with a repeat of 1 on the tween and then an infinite repeat and delay on the timeline like this: var b = document.getElementById('testGSAP'); var tl = new TimelineMax({repeat:-1, repeatDelay:2}); tl.to(b, 1, {opacity: 1, scale: 1.5, ease: Linear.easeNone, repeat: 1, yoyo: true}); http://codepen.io/PointC/pen/GjgVQR Hopefully that helps. Happy tweening.

Hi TonyWasp Welcome to the GreenSock forums. For beginners, GS has some really great resources. I'd start with these two blog posts: Get Started With GSAP http://greensock.com/get-started-js The Jump Start Guide http://greensock.com/jump-start-js The CodePen collection of jump start animations is here: http://codepen.io/collection/ifybJ/ The docs are extensive and come with many examples: http://greensock.com/docs/#/HTML5/ Other than that, I'd say just fork a few of those starter pens and start trying some simple animations. When you have a question, we're here to help. Happy tweening and welcome aboard.

Hey Bruno, Is this what you need it to do? http://codepen.io/PointC/pen/WGZXdx Hopefully I understood your desired outcome correctly. Happy morphing.

Hi workwave If you want to morph a lot of paths at one time, you can easily loop though them and make that happen. I made a pen a few months ago to demonstrate that possibility. It may prove useful to you. http://codepen.io/PointC/pen/LNLpgB/ Hopefully that helps a little bit. Happy morphing.