Jump to content
Search Community

TimelineLite & Morph

AgathaCrystal test
Moderator Tag

Recommended Posts

Hi,
I created this animation  and tried to import it to my website. 

 

 

Surprisingly i only got the first part of my animation working and after some fiddling I got the same result in Codepen, while there are basically the same libraries loaded.

See the Pen eYNLZYX by Philastan (@Philastan) on CodePen

 

After reading in the documentary I ended up trying to use 

tl = gsap.timeline({ paused:true });

instead of the timelineLight - but still: Same issue. It seems like Gsap gets stuck at the Morphing Part.

 

I am happy about any kind of help!

 

Phil

 

See the Pen VwLRMwx by Philastan (@Philastan) on CodePen

Link to comment
Share on other sites

Hey Agatha and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. We couldn't do what we do without people like you.

 

It think the main issue is that you're trying to mix GSAP 3 with GSAP 2 plugins. They aren't compatible. You should download the GSAP 3 files and use those plugins instead. An easy way to find the download is on our installation page.

 

Putting your code into our GSAP 3 starter pen (which loads all of the GSAP 3 plugins as well) shows it working once you load jQuery:

See the Pen ExjMwmb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

While you're working on it, why not use all GSAP 3's format? It's even more simple using defaults :) Also note that you don't have to put the values in quotes and give units. You also don't have to use the Max/Lite stuff any more. It's way better!

See the Pen eYNXGRW?editors=0010 by GreenSock (@GreenSock) on CodePen

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