Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bennyboy1978

Reset animation on new page, Pjax

Recommended Posts

Hi!

 

Not sure if I should ask here on on Barba JS forums, so apologies if this is the wrong place!
I'm trying to slightly customise this awesome pen by Blake. I've got it to work how I want but I'm using Barba JS for page transitions. When you click on the box it fills the browser and transitions to the next page. Perfect! On the second page I have these boxes again  but when click them the animation no longer works. Is there any way to reset it when you hit the new page.

 

Thanks

 

 

See the Pen WwgQEV by osublake (@osublake) on CodePen

 

See the Pen WYaaoE by anon (@anon) on CodePen

Link to comment
Share on other sites

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.
 
  • Like 7
Link to comment
Share on other sites

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! :)

  • Like 2
Link to comment
Share on other sites

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.

See the Pen full by victorwork (@victorwork) on CodePen


 

Hugs

  • Like 5
Link to comment
Share on other sites

This is awesome @Noturnoo Thanks so much.

 

I've managed to make it all work properly using the views method. You're a legend! 

  • Like 1
Link to comment
Share on other sites

  • 4 months later...

Hi @Victor Work,

 

How would ClearProps or TweenMax.set work for a paused tween inside a for loop? Thanks for your help.

Link to comment
Share on other sites

for (var i = 0; i < element.length; i++) {
	element[i].anim = TweenLite.to(element[i], 1, {
    	y: 100,
        ease:Power1.easeIn,
        paused: true
    });
}

Something like this?

Link to comment
Share on other sites

Sorry if I wasn't clear.

 

I'm also in the same situation of using barbajs and would like to know of a way to reinit my tweens.

I understand from previous correspondence in this thread to use ClearProps or TweenMax.set is the way to go. 

For example: 

TweenLite.set(element, {clearProps: "all"});

 

So now if I want to reinit paused tweens inside a for loop, how would that work out to be?

for (var i = 0; i < element.length; i++) {
	element[i].anim = TweenLite.to(element[i], 1, {
    	y: 100,
        ease:Power1.easeIn,
        paused: true
    });
}

 

Thanks so much! Appreciate your time and help.

Link to comment
Share on other sites

I read your question a few times and I'm still a bit lost. clearProps literally removes any inline styles. Is that what you want?

 

And you asked how to "reinit my tweens" - do you mean creating new tweens that are paused initially? If so, yes, the way you did it seems like it'd work. Or are you trying to take existing tweens and tell them to re-record their starting/ending values? If so, invalidate() is what you want. 

 

Are you running into a particular problem? Have you tried the code you suggested and it doesn't work? 

Link to comment
Share on other sites

Yup, it doesn't work. I tried using clearProps like this below. Paused tweens doesn't reinit.

 

Barba.Dispatcher.on('transitionCompleted', function(currentStatus, prevStatus) {
	for (var i = 0; i < element.length; i++) {
		element[i].anim = TweenLite.to(element[i], {clearProps:"all"});
	}
});

 

Link to comment
Share on other sites

You have a syntax error. A to() tween requires 3 parameters: target, duration, vars. You're only passing 2. I think you meant to use a set():

 

//BAD:
TweenLite.to(element[i], {clearProps:"all"});

//GOOD:
TweenLite.set(element[i], {clearProps:"all"});

//ALSO FINE, BUT LONGER:
TweenLite.to(element[i], 0, {clearProps:"all"});

 

Does that resolve things for you? 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×