Jump to content
Search Community

Reset animation on new page, Pjax

bennyboy1978 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

  • 4 months later...

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.
×
×
  • Create New...