PointC

You'd just need to create separate groups for the different speeds. Something like this maybe. Happy tweening.

Please try adding this to your .door CSS: outline: 1px solid transparent; Happy tweening.

Just for giggles have you tried rounding that translate down to whole numbers instead of the current two decimals? (or removing it completely) It shouldn't be a problem, but I've seen some odd stuff with my SVG animations.

That onComplete will fire at the end of the whole tl timeline when all three text elements have faded out completely. You can add onComplete calls to the tweens too if you wanted/needed to do that. Adding one to a stagger is a bit of a different beast though. You have to remember that a stagger returns an array of tweens so adding an onComplete in the vars will fire each time one of the staggered elements finishes its animation. To call a function after all the staggered elements have finished you would use onCompleteAll which goes in a different position. For a tween, it goes after the stagger number. TweenMax.staggerTo( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) If the stagger is on a timeline, it goes after the position. tl.staggerTo( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* ) Hopefully that helps. Happy tweening.

Hi @KerryRuddock How about something like this? Hopefully that helps. Happy tweening.

Hi @launchcatapult Welcome to the forum and thanks for joining Club GreenSock. I couldn't get my scroll wheel to work on the site so I'm not sure if everything is 'wired up' yet or not. After I clicked one of the menu buttons the wheel worked, but the whole scene moved really slowly. It's always harder to answer questions looking at a live site instead of demo. I think what you're looking for is the position parameter. https://greensock.com/position-parameter You would add labels to the timeline and then play() from a certain label when one of your transitions is finished via an onComplete callback. Or if you're trying to change the scene in the middle of the transition, you could make that master timeline label jump at the 50% progress point of the transition animation. If you could put together a simple demo, it would be easier to advise you. Here's a some info about that. It does not need to have your actual project assets. Just enough elements to demonstrate the question or problem would be best. Happy tweening and welcome aboard.

You can't see all of it, but if you triple click and copy you'll get the whole link. You can also bookmark this: https://cdnjs.com/libraries/gsap Happy tweening.

Here's a basic PIXI container move that should get you started. Happy tweening.

In addition to the docs, there is a lot of great info on the Learning page: https://greensock.com/learning The blog is loaded with good stuff too: https://greensock.com/blog/ Have fun.

Hi again @katerina Solstad There would be many ways to do that. You could play a tween and then call a function that plays it again with a different duration. You can also create a timeline and tween the timeScale() which is pretty neat. Here's a good post with some of those ideas in demo form. https://greensock.com/learning-gems It really depends on exactly what you need to happen. If you can put together a simple CodePen demo with some divs and let us know what you'd like to see, we can guide you to the best solution and give you better answers. If you need bonus plugins for your demo, this is a good GreenSock demo to fork and get you started. Happy tweening.

Yep - if you have a new question, it's always best to start a new thread. Thanks again for your support by joining Club GreenSock.

Thanks. We'll kick this upstairs to @GreenSock or @Carl.

Happy to help. Also, just an FYI: if you're loading TweenMax, you do not need to load the ease pack or CSS plugins because they are already loaded with TweenMax. Here is a list of what's included when you include TweenMax: TweenLite TweenMax TimelineLite TimelineMax CSSPlugin AttrPlugin RoundPropsPlugin DirectionalRotationPlugin BezierPlugin EasePack Happy tweening.

Just head for the home page https://greensock.com/ and click the green 'DOWNLOAD GSAP' button and choose your build. If you choose customize, it will allow you to pick which plugins you want. (That's where you'll find the text plugin link) Happy tweening.

Yep - free to use. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/TextPlugin.min.js"></script> Happy tweening.

@Visual-Q - When you start typing an answer it should auto claim it for you. Once you start typing there should be a button that says 'I Give up' which should release it. That being said, I have had it 'stick' a few times and I ended up having to re-claim it and then give up to make the claim go away. That hasn't happened in several months though. BTW - congratulations on your moderator promotion. Well done!

Hi @blaasvaer If I understand your question correctly, it sounds like you might be looking for the text plugin rather than scrambleText. Here's a quick demo showing the difference. More info: https://greensock.com/docs/Plugins/TextPlugin Hopefully that helps. Happy tweening.

If the main.js file has your tweens, you need to move it below the GreenSock scripts. Right now it looks like you're loading it first. Load TweenMax, then plugins, then your main.js. Happy tweening.

Hi @katerina Solstad Welcome to the forum and thank you for joining Club GreenSock. If I had to guess, I'd say @Visual-Q is probably right in wondering if you're also loading TweenMax. Here's the CDN link for that: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script> Without more to see though, we're just guessing. Since it is working in your demo, you can also export that file via the 'Export' button on the bottom right. Then you can compare the CodePen files to your local version and see what's different. Happy tweening and welcome aboard.

Hi @jimmylet That icon moves over to the other side because that is the start point of the circle path. SVG circles start at the 3 o'clock position in most browsers. You could create paths with desired start points, but you have more than one icon on a path so that could prove troublesome as well. Since this is a circular orbit I think you could make things easier on yourself by rotating the entire group of icons around the center point of the circles. Something like this maybe: I made a slight change to the circles so they'd all have the same cx/cy coordinates. You may also be interested in this thread as it deals with the same topic. Hopefully that helps. Happy tweening.

Hi @Valeria Welcome to the forum and thank you for joining Club GreenSock. As @Acccent mentioned, there would be a whole bunch of ways to approach this. Here's my two cent approach for you. I'm not sure if that is even close to what you had in mind, but maybe it will give you some ideas. Happy tweening and welcome aboard. @Acccent - congratulations on your Moderator promotion. Well done!

Just guessing here but I would imagine you were downloading and compiling your latest upgrade from the Matrix and your visual sensors were operating with reduced power or momentarily turned off during that process.

Welcome back @mikel and congratulations on your shiny new Moderator Badge! You deserve it.

Perhaps Master @OSUblake's SVG Squigglevision can help.