PointC

I'm not sure I follow what you'd like to happen. Do you mean the hand should fade in, rotate a few times and then fade out? If that's what you need, you can add a repeat:-1 and repeatDelay:3 to the timeline. Does that help? Happy tweening.

Sorry, I meant animate the divs, not the SVGs. Right now your parent divs (.priv-key-div and .pub-key-div) have no height because the child SVG is set to position:absolute. That's why your z-index isn't working. Make sense? Happy tweening.

I'd probably recommend separating the two into unique SVGs and put them in their own divs. Then you can take advantage of z-index. As for the easing, yes you should be able to create a smoother animation by adjusting the easeIn and out for your moves. You can also use a CustomEase. Happy tweening.

You can put all the functions you want inside the function you call with delayedCall(). Does that help?

The tween start and end values get recorded when the tween is created. In this case that is 0 degrees and 120 degrees (+=120). You then tell the engine to play the tween and repeat when it's done. So it plays from 0 --> 120 over and over. That's working as intended. The easiest approach is the one I posted above. If you need a delay between repeats you can use delayedCall or use an empty tween that has a 2 second duration. Does that make sense? Happy tweening

There would be a few ways to do that. I think the easiest in this case is to place the tween in a function that gets called at the end of each tween. function spinMe() { TweenMax.to(box, 2, { rotation: "+=120", transformOrigin: "50% 50%", onComplete: spinMe }); } spinMe(); Hopefully that helps. Happy tweening.

Yeah, I really wish we had the resources to help with whole projects. My advice is to make just one div behave as you'd like and then add additional elements into the accordion. Always start small and build from there. If you have GSAP related problems or questions, we're happy to help. Happy tweening.

I think you asked the same question last week. If you have a specific GSAP related problem or question we're happy to help, but we can't dive in and create entire projects. In your original thread @ZachSaucier linked to another thread which should be helpful: Here are a couple more: You can also use the forum search feature to find additional accordion threads. If you have GSAP questions/problems as you progress, we're happy to help. Happy tweening.

How about this: timeline.fromTo(nextHeading, 1, {color: 'white'}, {color:"red"}); Does that help?

That's happening because you keep adding tweens to the end of the timeline. Each click adds a one second tween in your animateSlide() function. You may want to use timeline.clear() at the beginning of that function. Happy tweening.

Yep, masks can be fussy like that. Glad to hear you solved it. Happy tweening.

Do you need to reverse it from the end? I'd just play/reverse on hover like this: https://codepen.io/PointC/pen/qeVZmV Does that help? Happy tweening.

I'd probably just use one of the ScrollMagic event handlers. You could rotate those objects with a separate tween or timeline and call that tween with a scene end event handler or maybe fire it when the scene reaches a certain progress point. You could also just use a separate trigger. Keep in mind that ScrollMagic is not a GreenSock product. Check out the event docs here: http://scrollmagic.io/docs/ScrollMagic.Scene.html#event:end Happy tweening.

Glad to hear it works now. Thanks for letting us know. Kinda weird though. I did the same thing Zach did in trying it locally and had no problems. ? Oh well, you fought the gremlins hard today. Time to go enjoy some much deserved pizza. ? Happy tweening.

How about removing jQuery from the equation? var introH1 = document.querySelector('#intro h1');

Have you tried this? var $introH1 = $('#intro h1')[0];

Welcome to the forum. You can check out the Bezier plugin: https://greensock.com/docs/Plugins/BezierPlugin The MorphSVG plugin has a .pathDataToBezier() method. https://greensock.com/docs/Plugins/MorphSVGPlugin You may also be able to make it work with a textPath animation. I wrote about that here: Demo from that thread: https://codepen.io/PointC/pen/vRzmeO Hopefully that points you in the right direction. Happy tweening.

Just to add (ha) to Zach's excellent advice. You'll often use the .add() method to add a label or a function (without parameters) to the timeline. The biggest use, at least for me, is building a master timeline and adding nested timelines to the master. Check out this great article for all the details. https://css-tricks.com/writing-smarter-animation-code/ Happy tweening.

Are you talking about the actual hover or did you mean when the cursor gets close to the button? If it's the former, I'd follow @ZachSaucier's advice. If it's the latter, we do have some threads that show a menu button pulling towards the cursor as it gets close to the hover target. I just wasn't quite sure what you meant. Happy tweening.

Here's a SVG button I use on my own site as well as some client sites too. Maybe it'll give you some ideas. https://codepen.io/PointC/pen/PMmbpz Happy tweening.

@OSUblake aren't you still on vacation? ?️ The pull of the forum is just too strong for you to resist and nobody even mentioned canvas in this thread.

Zach is getting clever today. My stuff is usually part of a larger SVG. I can't work too much with CSS because it scares me. Yours also isn't working correctly on my iPad. It's drifting off the right side of the window for some reason.

I do so it will scale perfectly. I'm old with a thick skull so I need things that are simple. ?

If you wanna get fancy you could also use a SVG mask with a gradient resulting in a nice feathered edge. https://codepen.io/PointC/pen/EqmxZV Happy tweening.

If you want to make this work with ScrollMagic, here's a quick demo of what I was advising — measure each elements position from the top. Here I've just created a bunch of divs in a grid and looped through to create arrays which act as 'rows' in a master array of targets. I then create a new ScrollMagic scene for each 'row' and use the .staggerTo() method on the targets. Note: This is not responsive. It will only calculate on page load. You'll have to kill and recreate the ScrollMagic scenes on resize, but this should get you started. https://codepen.io/PointC/pen/aeJxJE Happy tweening.