SammyC123

I found an impressive little tutorial over on Codrops about a neat block reveal effect (seen here). Unfortunately, it uses anime.js as its animation library. I've been trying to replicate the effect in GSAP but have found little success. So I was just wondering, are there any pertinent examples of similar effects that you guys have achieved with GreenSock? I've searched pretty exhaustively all around Codepen and this site and can't quite find anything like it. But I know you guys have a much deeper knowledge of the site and what you've accomplished in the past. Thanks for reading. Codepen demo with reduced code also provided below for reference (but it's still anime.js).

Wow, how have I never used .progress() before?!? Amazing. Thanks, man!

I've read through the docs, and I understand invalidate() and updateTo(), but I'm unclear on proper implementation (or if they're even a good idea here). My goal is relatively simple: I want an element to continually move from left to right across the viewport (e.g. .fromTo(element, 3, {x:'0%'}, {x:'100%', repeat:-1})). The thing is, for the very first tween, I want the element to start at left: 50%. So on the first pass, it starts in the middle and goes right. Subsequent passes go fully from left to right. Is this a job for updateTo()? Is there a better implementation?

I haven't played with DrawSVG in a while and I'm trying to animate a simple path of some scribbles. I thought it was as simple as a TweenMax.fromTo(obj, 3, {drawSVG: "0% 0%"}, {drawSVG: "100% 100%"}); but no matter what I try, I can't get it to work. I feel like I'm missing something super basic. Is my SVG problematic or am I doing something wrong? Thank you in advance! I love this community and this product so much.

As usual, this is great and almost exactly what I was looking for. Jack strikes again with perfection! Whenever I think I've seen almost everything GSAP has to offer, you come along and teach me something new: tweenFromTo I am interested in some of those additional techniques you speak of, though, so feel free to confuse me any time.

I know I have read or seen something about this before, but after searching the forums, documentation, and Codepen to the best of my abilities, I have come up empty-handed. I want to have a secondary tween that is only active while the main tween is active. I have (poorly) emulated this behavior in my Codepen by using onStart and onComplete, but this is a clunky solution at best. Is there functionality I'm overlooking that allows a second tween to run only while the first is active? And while I'm wishing for things, does it complete in an elegant manner... meaning it uses the first tween's timing as a start- and end-point so that they, um, mesh in harmony? Feel free to improve my Codepen in any way possible!

I'm trying to create a new animation that I cannot recall ever seeing before (and my attempts at finding anything similar online have also come up empty-handed). Essentially, I want a coin to wobble on its rim, losing intensity before finally settling down. This is the exact animation I'm attempting to replicate, though mine will certainly be shorter in length. I should also note that my perspective will be top-down and not angled like the video, which might further complicate this process. I plan to update my Codepen over the next few days as I make progress, but I thought it best to reach out and involve the professionals here for input while I embark on this journey. Where do you guys think a good place to start would be? Please note that anyone with advice, tips, examples, criticism, or anything else is so very welcome. Thanks, and have a great weekend!

I'm simply trying to swap the direction of a tween on each subsequent repeat, e.g move x from -5 to 5 alternatively on repeat after the yoyo completes. I've tried the staggerTo({cycle:}) property but that is more for laying out a pattern of multiple elements. I've tried onRepeat but that fires the callback before the yoyo begins. Where am I going wrong? Just a little hint would be good. In this instance, [object] is exemplary; I understand about [{self}]. TweenMax.to([object], 3, { x: -5, yoyo: true, repeat: -1, onComplete: reverseDirection, onCompleteParams: [object] }); function reverseDirection(object) { // logic here... x: 5 }

Interesting, and thank you for the insight. How does this technique affect other browsers? In other words, is this something I should be doing only when I detect the user is on Safari? Likewise, what sort of animation duration do you recommend to resolve this? Can it be quick (i.e. 0.01 seconds) or does it have to be a custom solution of "this looks the best" for every use case? This kind of reminds me of having to do the old CSS 3D transform trick in order to trigger GPU acceleration.

Is there any explanation for why that Codepen demo scrolls smoothly in Chrome, Firefox, and even Internet Explorer, but in Safari it becomes incomprehensibly jerky, making the screen bounce all around? Even using force3D: true doesn't seem to make a difference (not that it necessarily should).

Oh my gosh... offsetX/Y! Even simpler now. Thanks, Diaco!

Perfect, as usual -- exactly the solution I was needing. I'm actually proud of myself because I was headed in that direction already, but you just saved me so much experimentation time! Thank you once again, Blake.

I don't believe a Codepen is necessary for this question, although I can build one if someone needs to see precisely what I'm talking about. If you have a very long (width-wise) element you want to animate along a bezier curve, and you're using autoRotate, it automatically calculates the center of that element and rotates it around that point. How can I offset that center point, say, 50px to the right?

Thank you for the reply -- it was very helpful. I've updated my Codepen to replicate what you did, only vertically. The GreenSock forums are an invaluable tool and you guys are always ready to pitch in at a moment's notice. Such an incredible community you have here, and such incredible developers!

I'm hesitant to continue asking for help on this topic, and I apologize for doing so, but I've yet to encounter an example or use-case that satisfies my needs, so I'm hoping someone with more experience in this realm has a clever solution. What I want seems relatively simple, yet it continues to elude me. I am tweening an element (police car) along a bezier curve as the user scrolls. All I want is for that element to stay centered vertically during this process. Why is this so difficult and what am I missing? Should I be adjusting the scroll rate of the background to match?

Curiously, I tried replicating this ScrollMagic example on Codepen to play around with it, and while it works just fine, the smoothness of the animations is vastly subpar. Any idea why that would be? I think it has something to do with the viewport, but I'm uncertain. I know this is probably outside the scope of your support, but I thought you might know off-hand why it would be occurring. Here's my version: http://codepen.io/anon/pen/VajVNW

Thank you so much, Carl. Your solutions were precisely what I was looking for, but at your recommendation I am going to try making it work with ScrollMagic. I deeply appreciate how you always seem to have relevant examples at hand.

Is it possible to advance the tween of the car moving down the path based on the user's scroll, or do I need an additional library (e.g. ScrollMagic) to accomplish this? To reiterate/clarify, if the user presses the down arrow or uses their scroll wheel, I want the car to move down the path. I would like to solve this problem purely with GreenSock.

"autoRotate: true" I don't know how I missed this. I am sorry for wasting anyone's time!

I know that animating a path automatically has rotation calculated for it (like here). But is it possible to convert a path with MorphSVG and then animate an element along it with that same proper rotation? E.g., can I have the car correctly rotate along the path as it traverses it? Thank you in advance.

That is probably the most comprehensive, well-structured, and brilliant answer I've ever received for any question on the internet. Thank you for being you.

I have an SVG with a number of drawn paths/lines. How would I go about giving them a very subtle, minor movement effect in the same direction as the cursor that is being dragged across them? For example, if you move your mouse through the lines on the Codepen, they gently and briefly move downward, then return to their original position - almost as if a light breeze had hit them. But how can I make them go whichever direction the mouse passes through? Or maybe even something cooler, like the particles.js repulsion effect? I'm not looking for an entire code solution; just a helping hand to get me started. I'll be updating my Codepen slowly as I work out how to go about this. Thank you in advance.

Fantastic! Exactly what I was looking for. You saved me hours of digging through docs. Thanks very much.

Using the standard animateMotion, it is very straightforward how one is to go about animating an object along a motion path. Looking at the documentation for GreenSock, however, makes this simple task seem highly confusing. Is there a basic example or CodePen anywhere of how to go about animating an object along a motion path?

When the ball reaches an intersection of another line, I would like that ball to split/duplicate itself and begin traversing that second path while the first ball continues on its own course. I am trying to determine a method programmatically to make this happen, so that the solution is extensible to any number of additional lines. So far, I have come up short. Is it possible to use TweenMax to detect when a set of coordinates is reached on a path? (e.g. where the second path begins at M90.7, 86.7) Or is this going to rely solely on timing, in which case easing is pretty much thrown out the window because everything must be linear? Thanks in advance for any assistance rendered.