Jump to content
Search Community

can't animate image height to toggle it

pileoni 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 all, i've a little problem i tried to resume in the attached codepen.

 

Say i've layout made of many containers, and i have an image i want to be displayed with an animation, a vertical toggle.

The very same code, only works if i've set, at JS line 29:

.from($target.find(".myImage"), 0.5, { width: 0, ease: Power3.easeOut })

 while it does not, most of the time, if i try:

.from($target.find(".myImage"), 0.5, { height: 0, ease: Power3.easeOut })

 

What am I missing?

 

 

See the Pen rpqBNQ by pileoni (@pileoni) on CodePen

Link to comment
Share on other sites

It would be great if in cases like this you could reduce your demo so that it only includes the code necessary to replicate the problem. 

No need for loops and multiple timelines. It just adds an additional layer of complexity. 

 

Being that every time I ran your demo it gave different results of showing different images in different places my guess is that your javascript code is running before your images are loaded and thus the engine has nothing to take a height measurement from. Try adding height attribute to your images or waiting until all the images are loaded.

 

See the Pen aERmwK by GreenSock (@GreenSock) on CodePen

 

  • Like 5
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...