PointC

There seems to be some general weirdness with the overflow-x on iOS. When I test your demo in my iPad, it's just letting the width of the page go out to the full width of the wrapper with all the boxes. I'm no iOS expert, but a Google search showed a few results for overflow-x not being respected. So for your Draggable question — you want the user to be able to press the draggable element and scroll up/down, but once you start dragging left/right you want that up/down scroll to stop? Is there a reason the user needs to be able to scroll the page up and down by pressing the draggable element? I ask because allowNativeTouchScrolling: false would work great for this.

Hi @Kári Bertilsson Welcome to the forum and thanks for joining Club GreenSock. Have you tried: allowNativeTouchScrolling: false Does that help? Happy tweening and welcome aboard.

I honed my speed skills back in the day before I was a Mod. I would try to answer faster than Carl, Jonathan, Blake, Diaco and Jack, but would usually lose those speed battles.

How about this? https://codepen.io/PointC/pen/aboNbEm Happy tweening.

Loops are your friends when you need to make several ScrollMagic scenes. I recently wrote a post about GSAP and ScrollMagic. Check out demo #4 and #7 as they show how to create multiple scenes with a jQuery loop. You can of course use a vanilla JS loop too. Hopefully that helps. Happy tweening.

Another option is not using ScrollMagic on small screens. Here's a thread from yesterday that shows how you can either enable/disable scenes or create/destroy the controller at certain widths. Maybe that'll give you some ideas too. Happy tweening.

We need to hold back certain things so all the mods look like we know what we're doing.

The GreenSock Animation Platform:

This should help.

You're missing the GSAP plugin from ScrollMagic <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script> Happy tweening.

I think moving the scripts to the bottom of the page will solve this for you.

In addition to the great advice from Shaun and Zach, I thought I'd point you to this similar thread. It has a little bit of extra info which might help too. Happy tweening.

The path isn't morphing as you'd like because your paths have some funky points. The thin has more than the thick and some of the point positions on the thin look very odd to me. Ideally on a shape like that you'd have 8 points. Here's a side by side comparison of your thin and thick. As with all things SVG, it comes down to asset prep making your life a lot easier. Just FYI — you don't need three shapes for this. Your original and thin versions are the same. You can just morph back to the original whenever you like. Hopefully that helps. Happy tweening.

@Arintoos I received your private message, but we need to keep support out here in the public forum. I think you're just missing the ThrowProps plugin on your site. https://greensock.com/docs/Plugins/ThrowPropsPlugin That is a Club plugin. https://greensock.com/club/ Happy tweening.

Yep, very doable. In addition to Zach's excellent advice I'd offer the possibility of using the SVG clip-path too. Masks differ a bit and are great when you need strokes or gradients to be part of the mask. Here's a quick clip-path option. Maybe it'll give you some ideas. https://codepen.io/PointC/pen/xxKwZqQ Happy tweening and welcome aboard.

Are you saying Draggable isn't working for you in my demos? Or do you mean that you forked the demos, made changes and now it's not working?

Just a couple typos. //line 4 switch this tween.to('#box', 1{pacity:0}); // to this tween.to('#box', 1, {opacity:0}); // line 8 switch this const scene = new ScrollMagic.scene({ //to this const scene = new ScrollMagic.Scene({ You'll also need to load jQuery since we're using that for the resize listener. If you load that script and make those changes, you'll be good to go. Happy tweening.

Did you see this section in the article?

Hi and welcome to the forum. Just FYI — ScrollMagic is not a GreenSock product, but we do get a few questions about it. That being said, here are a couple demos from other threads which should be helpful. You can disable the scene for certain window sizes. Here's that approach. https://codepen.io/PointC/pen/ZyZvwv You could also create/destroy the controller and clearProps depending on screen size. Here's that approach. https://codepen.io/PointC/pen/xBdBrz Happy tweening.

Do you mean like this? https://codepen.io/PointC/pen/Jgmaab

Welcome to the forum. Two things: You need to target the path rather than the whole SVG. There is no stroke on the path. DrawSVG only works on strokes rather than fills. I forked your pen and added a red stroke for illustration purposes. https://codepen.io/PointC/pen/pMxOJQ Hopefully that helps. Happy tweening.

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?