Leaderboard

That tutorial doesn't apply to what you are trying to do. You will need to morph multiple shapes, and you will need to animate fill color as well based on what are you morphing into. Take a look at demo by @PointC, This tutorial will help you write timelines using functions, https://css-tricks.com/writing-smarter-animation-code/

@selfishound When it comes to animation/tweens/motion ... I would choose GSAP exclusively (I know, surprise there ?). What I mean is ... choose one, not two. Also, you're affecting the same property on the same element, which is why it will jump around. So ... I think it would be best to apply one tween to #logo, and the other (parallax) tween to a parent wrapper. That should give you better control. Here is a CodePen illustrating what I'm getting at.

Please try svgOrigin: TweenLite.set('.home__links-container', {svgOrigin:'250 250'}); More info: https://greensock.com/gsap-1-16 Hopefully that helps. Happy tweening.

You're using global, var, and let variables inside a loop. That's asking for problems. And you probably shouldn't loop through a object like that. Fixed. const tl = new TimelineMax(); js1["slides"].forEach((slide, i) => { const delay = dur + (i * dur); tl.set(text, { text: slide.title, x: 0 }, delay) .to(text, 1, { x: 360 }, delay); });

You shouldn't need to worry about GC (well, aside from deleting your own references). GSAP does a sweep roughly every 2 seconds to release animations for GC. My guess is that you're expecting things to immediately get removed, but you need to wait a little time. The browser will determine when it actually wants to do its own sweep, but GSAP will release things on its own typically within 2 seconds after they're done. Does that answer your question?

It's best not to mix CSS transitions with GSAP as it can result in a fight for control of the element. Please remove the transition on line 27 of your CSS and then you can tween the draggable back to 0 like this: const addDegree = () => { TweenMax.to(menu, 0.5, {rotation:0}); }; Happy tweening.

Did you see Rodrigo's comment where he pointed out that you have your onStart call inside the pixi:{} config object? That's not meant to be there. If I move it outside the pixi config object and put a console.log call into the onStart, I see it fire according to the delay as expected. Your problem here is not with GSAP but with JavaScript scoping. You are asigning new values to the same variable and because it's the same variable, its value gets updated every loop call. So, you think something's wrong but it's not. It's expected behaviour. What you want to do is create a brand new variable inside the for loop to store the values you need. So. Instead of: for (k in js1["slides"]) { // Wrong way to set these variables up v = js1["slides"][k]["snips"]; text.x = 0; dur += 5; textTitle = js1["slides"][k]["title"]; console.log(textTitle + " start at sec:" + dur); TweenMax.to(text, 1, { pixi: { x: 720 / 2, }, onStart: function() { text.text = textTitle; } delay: dur, ease: Power2.easeOut }); } You need: for (k in js1["slides"]) { // Wrong way to set these variables up const v = js1["slides"][k]["snips"]; text.x = 0; dur += 5; const textTitle = js1["slides"][k]["title"]; console.log(textTitle + " start at sec:" + dur); // You will also need a new "text" reference if you are planning on having two lines appear staggered TweenMax.to(text, 1, { pixi: { x: 720 / 2, }, onStart: function() { text.text = textTitle; console.log(textTitle) } delay: dur, ease: Power2.easeOut }); }

Hi Racke, Welcome to the forums. If you are using spans and divs chances are you will not want to use Animate CC. Animate CC exports to HTML5 canvas which doesn't contain any divs or spans. I would strongly recommend Mikel's advice above. Start small. Learn a bit of the GSAP API with just a few elements in CodePen. Carl

Hi @Racke1940, Welcome to the GreenSock Forum. Look at the GreenSock Learning Center. And try something on CodePen ... Here's a taste: Start happy tweening ... Mikel

Hi Rick, Well, actually passing anything between sibling components or up the chain in React and Vue is a bit complex actually, that's why you can rely on Redux, MobX and VueX. If you're starting with React, I think that @OSUblake's approach is the best. Is simple and works in the way you expect. Right now my recommendation would be to get more familiar and comfortable with React and then move onto using Redux for more complex tasks and when your apps need to observe changes in the app's state. In that case you could use redux observable, but as I mentioned, it would be better to start with the basics of redux and then move into more advanced stuff. You can watch this free course by Dan Abramov (creator of Redux and part of the React team) about getting started with React and Redux: https://egghead.io/courses/getting-started-with-redux Also this article by Lin Clark is very good as well: https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6 Happy Tweening!!!

Hm, I'm not aware of any complex tutorials that'd show you exactly how to recreate something like https://www.sartobikes.com, but I guess I'd just say to think of PIxi like the rendering layer, and GSAP is simply the tool that can animate anything you want. So it isn't as if you need to learn some secret ways of mashing the two technologies together - just build in Pixi and reach for GSAP whenever you want to animate any properties. If you're not familiar with Pixi yet, I'd definitely recommend spending some time getting up to speed. From what I understand (and I'm no expert), it's a very rich canvas-based platform. @OSUblake is our resident expert around here. And there is a GSAP PixiPlugin to make things easier. Good luck with your project! I'm sure that as you get up to speed with both GSAP and Pixi, you're gonna be really excited about what you can accomplish.

I believe that will solve your question. But anyway if you want to test out of your development environment I've created a Codepen mini-site using BarbaJS + GSAP, feel free to give a Fork and do some testing. } It has a similar transition with this OSU Blake pen. https://codepen.io/victorwork/project/full/ZeYREp Hugs

I have been using BarbaJs on some recent projects, and I have been through this same challenge. The solution I found to redefine the elements for the initial states is to use the BarbaJs Views system (see how it works at this link). Then when rendering the new Container you can use the ClearProps or TweenMax.set or TweenMax.fromto, in the event: let Homepage = Barba.BaseView.extend({ namespace: 'homepage', onEnterCompleted: function() { TweenMax.fromTo($el, time, {stateInitial},{stateTarget}) } }); Homepage.init(); I hope this helps you. Any questions just ask.

Hi @teejay_hh, You can the .progress() method to make the timeline jump to any point in the timeline's progress (0 being the start, 1 being the end, .5 being the halfway point). Hope this helps!

Hi and welcome to the GreenSock forums, Yeah, you can use splice() to grab any number of elements from the end of the chars array that is created by SplitText. //grab the last 3 characters and reverse them var lastChars = myText.chars.splice(myText.chars.length-3,3).reverse(); Here is a simplified demo: Here is an explanation of splice() http://www.tothenew.com/blog/javascript-splice-vs-slice/

There's a bunch of different ways to pass stuff between siblings. I guess it matters what you mean by "stuff", as in is this stuff something that should be kept in sync with your app's state? Maybe @Rodrigo can chime in and offer some advice since he's the resident React expert around here. For something fast and simple, you can't go wrong with an event emitter. I added EventEmitter3 along with the ThrowPropsPlugin to your demo. When a throw ends, that component fires off an event along with its end y position. The other component will do a short animation, and log out the end y position. You could have your listeners setState if needed. https://codesandbox.io/s/x9y5m6qvyo

Where you are using add() to inject the tween/timeline and set a label ... try creating labels with their own add() and using the position parameter to offset which ever tween/timeline you like. Here is a code pen illustrating that, Hope this helps!

It's hard to say without seeing what what you're doing. Can you make a simplified demo on codesandbox or stackblitz? For simple stuff, a mediator component can manage that. Have you looked at this calculator? On input, the value gets passed up to the parent component, which sends the calculated values back down as a property. https://reactjs.org/docs/lifting-state-up.html#lifting-state-up