Jump to content
GreenSock

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

Animation Overwritten / Not Working

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 all,

 

Sorry for the non descriptive title and incoming scattered question, it's late and not too easy for me to set up a code pen.
If it can't easily be answered i.e. it's not something glaringly obvious then don't worry I guess and I'll hack up something else, but anyway...

 

So I have multiple JS files, they are all routed for different things and get compiled into one later (there are no console errors once this is all running).

 

In a home JS file I have something along these lines (there's more to it but these are the key elements)

 

let buttonSearch = $('#header .right .button-search');
let loadAnimationTL = new TimelineMax({paused: true, delay: 0.5});
loadAnimationTL.from(buttonSearch, 0.75, {x: 33, force3D: true, ease: Power3.easeOut, delay: -0.5}) 
loadAnimationTL.play();

 

Basically a loading animation for the home page, the problem piece is this Search Button.

 

It's all been fine until now that I've wanted to do another animation with this button.

So in another JS file, I have the following.

 

function buttonSearchAppearAnimation(){
    // Get names
    let buttonSearch = $('#header .button-search');

    // Animation timeline
    let buttonSearchAppearTL = new TimelineMax({paused:true});
    buttonSearchAppearTL
        .to(buttonSearch, 0, {zIndex: 3, width: "70px", delay: 0})
        .from(buttonSearch, 0.5, {force3D: true, right: "-90px", delay: 0});
    return buttonSearchAppearTL;

}

// Store a reference to the timeline that was created to control it later
let buttonSearchAppearAnimationController = buttonSearchAppearAnimation();

 

And in a click event

buttonSearchAppearAnimationController.play(); // Play timeline

 

 

The problem is that the original first JS animation doesn't work anymore, the second does.

My understanding is that the second hasn't been called upon yet (timeline is paused and waits for a click event) so why would it be stopping the first from working?

 

I hope that made sense, thanks for your time anyway, any help would be greatly appreciated as always.

 

Cheers,

Paul

Link to comment
Share on other sites

yeah, there isn't a whole lot i can do with those 2 code snippets, but i noticed you have from() tweens for buttonSearch in 2 places.

 

immediateRender is usually involved any time you have multiple from() tweens on the same properties of the same object. 

perhaps something is being set in one of the from tweens that makes the element appear "wrong" somehow. No way for me to know but here is a video that explains immediateRender

 

 

as a side note, it seems a bit strange to put delay:0 in a timeline tween. I'd recommend switching to the position parameter to control tween placement in a timeline:

 

https://greensock.com/position-parameter

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hi Carl,

 

Perfect, thank you! You were quite spot on about what was occuring despite me not giving you much info to work with.

After watching that video it makes perfect sense, I didn't know about immediateRender and setting it to false in this scenario has worked.

 

Thanks for all of your other efforts on this message board, I've learnt a tonne from your other posts.

 

Cheers,

 

Paul

  • Like 2
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.
×