Leaderboard

Hi @mtkramer, Look in the docs: yoyo works only in conjunction with repeat To get back to the starting position, set your repCount(count); to an even number. https://codepen.io/mikeK/pen/pmyWxa Kind regards Mikel

I noticed a few problems: Your #p1pathB <path> had a typo - there was no "d=" before the path data string. That's a syntax error. You forgot to load ScrollMagic It looks like you're just using #p1pathB as a reference for the end values, but you had it nested inside of the <clipPath> element. I'd take it out of there. Here's a fork that doesn't use ScrollMagic, but just shows the path morphing: https://codepen.io/GreenSock/pen/9d91bcd8b9beb1d39a900235bc928a96?editors=0010 Does that help?

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

...and we would become the animation as it consumes us.

Can one imagine what a .max version of TweenMax would be like? ? Wormholes would appear, light would bend, world peace!

Hi DD77, It appears you have found our previous discussion on the masking of images given the pen you have forked. Given that the original pen works as a full screen reveal, what did you change? That will be the root of your issue here. If I understand your request correctly, you need to create a timeline onLoad that goes from 0 to 100% of the screen. Add a pause at halfway its progress. Then, have some logic on the click event to detect if the timeline is at its end. If it is, play reverse it. If it isn't, play forward. Does it make sense? ps: You will have to make sure you recreate your timeline every time the window is resized.

HI @JonQuayle, A couple problems ... in some places you are using what look likes jQuery syntax, but jQuery is nowhere to be found. With calling in jQuery and modifying a few things to make use of it ... you should be good. https://codepen.io/sgorneau/pen/bypvpa Also, there was an extra parameter being passed in your .to calls ... I stripped that out. .to uses .to( target:Object, duration:Number, vars:Object, position:* ) : * You were passing .to( target, duration, vars, position, somethingElse)

LOL ... I'm usually the passenger in that car! ?‍♂️?

In addition to my Development work, I've also put together an instagram page containing some of my Motion Design work. Enjoy! https://www.instagram.com/r4b0nmotion/

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.

Who is claiming that Cloudflare *isn't* GDPR compliant and in what way are they failing? https://www.cloudflare.com/gdpr/introduction/

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/

I am looking forward to upgrading to the "Club" Wednesday when I get my SS money. I will have access to SplitText and more. Thank you for your advice. My best, Bobby

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.

Happy to help, @JonQuayle!

Hey @Shaun Gorneau, Thanks so much, you are a legend! It is always those small details I miss - still a novice at this. Thanks again Jon

There is a GSAP snippet for VSCode: https://marketplace.visualstudio.com/items?itemName=hridoy.gsap-snippets that will complete a block of code for you. You only need to replace the parameters. Once you gain a mastery of the syntax you likely won't need the snippet. Also have a look at https://ihatetomatoes.net/get-greensock-101/ for an excellent and free GSAP course.

You guys are having way too much fun with this Love it.

An extension to the previous pen... In typical fashion around here, one thing leads to another and gets completely off the original topic. Extending Craig's elegant x: window.innerWidth I think I might have come up with a fairly decent option for making transform based animations responsive. It basically uses the parent element as a stage and modifier to animate relative to it. https://codepen.io/Visual-Q/pen/XwXQGV

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

Very elegant Craig... a thought on how to make it responsive. https://codepen.io/Visual-Q/pen/byEZqK

Very nice indeed, @PointC and @Shaun Gorneau

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

I should have said 'we try to keep this focused on the GSAP[...] but there is no law stopping people from jumping in and sorting it out'.

https://codepen.io/sgorneau/pen/oRbEJX

Hi @CloudStrife, Welcome to the GreenSock Forum. Look at this thread. There are some sliders ... Kind regards Mikel

Thanks a lot @Mikel, I just amazed by the quick response and the solution is my life saver ! Happy to be the part of the GreenSock community.

Hi @Thiyagesh, Welcome to the GreenSock Forum. Just add https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js https://codepen.io/mikeK/pen/pmgEqP You need GSAP TweenMax, ScrollMagic and GSAP plugin for ScrollMagic. Since ScrollMagic 2.0 you need to also include animation.gsap.min.js if you want to use GreenSock for the animation. Happy tweening ... Mikel

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