OSUblake

That is awesome! Thanks for sharing. Well, we're really don't need to drag anything. What we need is something more like gestures i.e. swipe. So the trigger: dial is how the gesture gets initiated, and then draggable just applies the user's movement to the proxy element. From there, we can read the changes made to the proxy and then apply them to something else, like scrubbing a timeline. Does that make sense? It can be bit confusing at first.

I think wrap might be a good one for that. const wrap = gsap.utils.wrap(0, 1); console.log(wrap(-0.75)) // 0.25 It might need a little jump start to do the first render. const animation = gsap.timeline({ repeat: -1, paused: true, id: 'animation'}) .add(baseTl.tweenFromTo(1, 2)) .progress(1) .progress(0);

Yep. You're conversion over to newer syntax looks good, so I don't know what's going on. I'll look more at more in depth later and try to figure it out.

Right. The Timeline statement sounds good. The Variable one doesn't because you might put a timeline in a variable just like I did in that demo. And relying on the term "variable" can get even more muddied once you start doing more advanced stuff, like using functions to return animations. Just think in terms of tweens and timelines.

For the same reason you would put anything in variable. You're need to use it somewhere else in your code, like controlling the playback. https://codepen.io/osublake/pen/0abe5d8654c647a1d0343a9e054ed63e

It's not possible. It sounds like you might not be understanding the difference between a tween and timeline. There is a lot of overlap in the methods and options, but a timeline is basically a container for tweens. For a set of tweens to behave like your timeline, you would need to something like this. // notice the delays gsap.to("#id", {x: 100, duration: 1}) gsap.to("#id", {y: 50, duration: 1, delay: 1 }) gsap.to("#id", {opacity: 0, duration: 1, delay: 2}); A timeline has a .to() method, but that it's just a shorthand way of adding a tween. What's happening under t

That's fine, you just can't use all as the property. .icon{ filter: invert(89%) sepia(54%) saturate(4856%) hue-rotate(314deg) brightness(109%) contrast(90%); width: 60px; height: 60px; margin: 25px 0; transition: filter 0.5s ease; } .icon:hover{ filter: invert(87%) sepia(94%) saturate(1270%) hue-rotate(304deg) brightness(122%) contrast(92%); transition: filter 0.5s ease; }

Thanks!!!

Hey @Chuck Taylor Here's something I made. It's not using the latest syntax, but it should be pretty easy to convert. https://codepen.io/osublake/pen/YrXdGZ

Right, but the view box changes and the coordinates aren't negative. At least that's how it is when I export. 🤷‍♂️

Yesss!!! https://codepen.io/osublake/pen/5648de67fb458da3752fa9168a80f8f6 Although now I want to know if there's an easy way to do that in Illustrator. If not, Inkscape is free.

I think you will need to do some cloning until the content is wider than the canvas. Maybe like a min of 2x the width. 🤷‍♂️ And instead of animating each text block individually, put them inside a wrapper, and animate the wrapper instead. That way they will be the same width. <div class="wrapper"> <div>This is a short text: 1</div> <div>A shorter text: 2</div> <div>This can be a long text but not as long as you'd think: 3</div> <div>Styles.css: [4]</div> <div>Package.json: 5</div> <div>Cr

Sounds like you get it. The space would be another element. If they are connected, it would be the same element. <!-- #first.active would select the #first element --> <div id="first" class="active"></div> <!-- #first .active would select the second element --> <div id="first"> <div class="active"></div> </div>

Just trying to figure stuff out for future reference. Does anyone know how to export an SVG so that the shape is centered at 0,0? Meaning most of the coordinates will be negative because they lie outside the svg. This would make it really easer to center stuff, like to the mouse cursor, especially if morphing will be involved as the dimensions of the shape might change. cc @PointC

It looks like that might be undefined because the model hasn't loaded.