PointC

You'd probably want to use some ScrollMagic events to take control of the timeline. http://scrollmagic.io/docs/ScrollMagic.Scene.html#event:enter Rather than having ScrollMagic control the timeline on load, you'd have the tween/timeline playing automatically. Then you hit the trigger and tween the progress() to any position you like. Here's a demo from another thread, but shows the basic technique. The timeline is not part of the ScrollMagic scene, but when scrolling to the triggers you can pause/play it. https://codepen.io/PointC/pen/oovrxq Hopefully that helps. Happy tweening.

I'm not sure I follow your question, but I think it's safe to say there would be a solution to have the two libraries work well together for your needs. Maybe you could make a demo? Thanks.

Looks like that site is using Three.js https://threejs.org/ You'll definitely need to use canvas/WebGL on something like that for the best performance. GSAP is an animation engine. It doesn't do any of the rendering. It doesn't care what you're animating — DOM, SVG, canvas. If it has a numeric value and JavaScript can touch it, GSAP can animate it for you. Happy tweening.

ahh.... a fellow 3D animator. Cool. ? If you have any GSAP related questions as you jump back in, we'd be happy to assist. Happy tweening.

You can fire GSAP animations for any kind of event — touch, mouse, scroll, etc. That doesn't really have anything to do with GreenSock. They're all just different event listeners. It's just a matter of setting up the logic for the listener(s). If a click or press shows the sub menu, does the user need to manually close it again? Does it auto close when they click or touch something else? Trying to figure out all the possible user actions and dealing with the multitude of devices can be a bit cumbersome. That's one of the reasons I've given up on hover for anything of importance. I don't have any drop-downs in my CodePen collection, but a forum or Google search should yield some helpful results. Happy tweening.

You could allow a mouseenter and a touch event to trigger the drop-down. The biggest problem with any hover is that detecting touch is not very reliable and there a lot of devices with a mouse and touch screen. I know Blake has complained about sites where his mouse didn't work because it detected his touch screen and turned off mouse events. My own two cents — for drop downs like that I don't use a hover. I drop a little icon on the button to show more is available and the same behavior is applied via a touch or click event. Again, just my opinion. YMMV.

I'd make a SVG with the same dimensions as the image and stack it on top of the picture. Make sure they scale the same and all your SVG elements should stay right where you'd like them — on top of the light fixtures.

Maybe you could put that into a demo for us? Thanks.

We had a rolling numbers thread last year and there were a number of neat solutions that you may find helpful. Happy tweening.

You're still targeting all the slices and overlays // this is all the targets var slice = $(".uncoverSlice"); var overlay = $(".gradOverlay"); // each loop now animates every target tl.to( overlay, 0.5,{opacity :"0"}, 0.2 ); tl.to( slice, 1, {width :"10%"}, 0.2 ); You need to find the individual targets in each loop; function createHover(i, element) { var tl = new TimelineMax({ paused: true, reversed: true }); var overlay = $(this).find(".gradOverlay"); var slice = $(this).find(".uncoverSlice"); tl.to( overlay, 0.5,{opacity :"0"}, 0.2 ); tl.to( slice, 1, {width :"10%"}, 0.2 ); // tl.to( image, 1, {scale :"1.1"}, 0.2 ); $(element).hover(doIt); function doIt() { tl.reversed() ? tl.play() : tl.reverse(); } } https://codepen.io/PointC/pen/zQBoLL Happy tweening.

Hi @cxinaris, Welcome to the forum and thanks for joining Club GreenSock. You'll usually want the target SVG element inside the same SVG as the motion path. This makes the whole thing size together and causes less headaches. You were also missing one script that allows ScrollMagic to hijack the tweens. <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script> I made a fork of your demo and stripped out all the extra parts that were not relevant to the question. You'll see that the line and target circle are part of the same timeline so they animate together as you scroll. I set the duration to the height of the SVG. In my fork, that value is set on load. You'll need to add a resize listener and make some adjustments to make this all truly responsive, but this should get you started. https://codepen.io/PointC/pen/WBxoow Hopefully that helps. Happy tweening and welcome aboard.

Hi @JonQuayle, You'd just need to use jQuery each() to loop through and make a tween/timeline for each target. This should get you started. https://codepen.io/PointC/pen/xNOOVo Happy tweening.

You can also use all the Club plugins on CodePen for free if you want to start playing with SplitText now. Happy tweening. https://codepen.io/GreenSock/pen/OPqpRJ/

If you have a bunch of letters to animate and you want to use 3D rotation, I'd say you'll probably find it easier to use DOM text. You could make it really easy on yourself and use the SplitText utility. More info: https://greensock.com/SplitText

Do it like @Dipscom said. Create a timeline and then you can animate the progress() to/from any percentage you like. You will have to rebuild the timeline for an updated radius when the window is resized.

rotationZ is the same as rotation. x/y rotations of SVG child elements won't work in most browsers as it's not supported by the spec. You can rotate the entire SVG in x/y/z, but not the guts of it. Make sense? Happy tweening.

Ha! I thought that was so weird it wouldn't rotate, but then again I hadn't rotated a mask in quite some time so I just tried adding the attribute to see if it would work. I didn't even think about checking the rest of the SVG code. That's why Jack wears the cape.

Sweet work @Visual-Q ? Looks like this thread is getting pretty clever. I think we have one of these happening.

Hey @creativeocean If you drop a transform attribute on the mask element you can get FF to play nicely with a rotation. https://codepen.io/PointC/pen/byEJpP Hopefully that helps. Happy tweening.

My two cent approach: https://codepen.io/PointC/pen/ardXWP Happy tweening.

We can try, but sometimes the community just grabs the wheel at the last second and we're now careening off the topic of GSAP.

Yep, the SplitText plugin would make that super easy. https://codepen.io/PointC/pen/ZNbmZO All of the Club GreenSock plugins are huge time savers and a ton of fun. I highly recommend a membership. More info about joining the club: https://greensock.com/club

I think we can all agree — the docs are a last resort of true coders. ?

As I said, I wouldn't animate 'top'. I'd use 'y' and then all the info you need is in the transform object. https://codepen.io/PointC/pen/mYepGd As for your original code, you'll want this instead: this.target[0].style.top If you have other ideas, feel free to implement them. If you have GSAP related questions, we're happy to help.

I'd recommend using y and then get the data from the gsTransform object, but if you want to use top, getBoundingClientRect() would be my choice. https://codepen.io/PointC/pen/oRjwoG