Leaderboard

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!

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

It'd be super useful to see a codepen, as @Shaun Gorneau suggested, but I think I know what you're referring to and I'm sure there's a solution. Remember that in any animation, things update at certain intervals which very likely don't land EXACTLY on top of your start/end times of your animations. So let's say your animation is running backwards and it's ALMOST at the start, like at 0.01 seconds in, and then the next update the parent's playhead lands at 0.02 seconds before that animation's startTime. Of course at that time it'd fire the onReverseComplete...but remember, we're 0.02 seconds off, so if you jump to the end at that time, of course it'll follow your instructions but if you're expecting it all to be synchronized with other animations that don't have that 0.02 seconds offset, it ain't gonna happen. See what I mean? This is actually one of the things that makes GSAP special - we factor all of this in when we do repeats whereas most other engines simply trigger a restart onComplete (meaning those gaps/inaccuracies creep in on ever iteration and things get out of sync). In other words, they do it the way you're doing it (manually reset the playhead in a callback) which isn't entirely accurate. Solution: //you can use this in your onReverseComplete to factor in any time gap... //offset is how far the parent's playhead has moved beyond the start of the animation in reverse var offset = tl.startTime() - tl.timeline.time(); tl.time(tl.duration() - offset); There are actually a bunch of other ways you could do this too, but I don't want to overwhelm you Does this help? If not, please provide a codepen and we'll take a peek.

Without seeing the code driving this, it's pretty tough to diagnose. I would recommend putting this in a CodePen (as simplified as possible while illustrating the issue). Perhaps one thing you want to look at instead of reversing the timelines is "yoyo". https://greensock.com/docs/TweenMax/yoyo

Are you saying you want to completely remove the inline transform property from your element? Or are you trying to just keep it at whatever it is at that moment (no change)? If you want to remove it completely, use clearProps. Otherwise, you could use "+=0" relative value, or just don't populate that property in the vars at all. For example: var vars = {}; if (...) { vars.x = tX-data.globalMessageXY.x; vars.y = -tY+data.globalMessageXY.y; } ... TweenMax.to(data.cameraBoneXY, 1, vars); Or maybe I misunderstood what you're attempting.

Thanks so much Noturnoo! I'm going to have a go with views like you said. I'll let you know how I get on. Cheers!

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!

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.

This is awesome @Noturnoo Thanks so much. I've managed to make it all work properly using the views method. You're a legend!

Woah. Way cool. Thanks so much for making me aware of EventEmitter and for taking the time to show me how. I love React for several reasons, but it can be really confusing for me at times to do some pretty (seemingly) simple things. I'm hoping I'll adapt sooner than later. Thanks again!

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

Thank you both very much! It works perfectly now!

Ooops, I didn't see Shaun was answering. I guess @Dipscom is right. I can't be FIRST.

Hi @pimbvlo Check out the docs for the .staggerTo() method. https://greensock.com/docs/TimelineMax/staggerTo() Your "GearGreyscale" label is in the onCompleteAll callback's position. You need to get rid of the "-=0.75" or the "GearGreyscale". tl.staggerTo(gearArray, 0.5, {fill: "rgb(255,255,255)", scale: 1}, 0.25, "-=0.75", "GearGreyscale"); You can use the .add() method to add a label. https://greensock.com/docs/TimelineMax/add

Line 261 is the problem ... tl.staggerTo(gearArray, 0.5, {fill: "rgb(255,255,255)", scale: 1}, 0.25, "-=0.75", "GearGreyscale"); You're passing "GearGreyscale" as the onCompleteAll parameter but there is no function GearGreyscale() That's not failing in the subsequent calls ... example tl.to([gearOne, gearTwo], 0.5, {alpha: 0.5}, "-=1", "GearGreyscale") because .to() has no parameters after `position`. Hope this helps!

Do you mean something like this?: Notice that your original was using querySelector() which will only get the FIRST match, whereas querySelectorAll() will get all matches but of course you've gotta loop through them to attach listeners accordingly. There are actually a lot of ways you could structure this.

Hi @Tootall, Welcome to the GreenSock Forum. This could be a way ... The green div just marks the area. Happy tweening ... Mikel