[can't animate image height to toggle it]

Thank you, the idea about the code may run before everything is loaded makes really sense.

In fact, i've change my code by using a series of promises and looks to works fine now.

Thanks!

[can't animate image height to toggle it]

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

[animating elements on resize rearrangement]

I'm trying to create a simple masonry style portfolio. I'm aware of the many plugins existent, i've tried already masonry.js, but i was quite unhappy with several animations conflict i ended up having with GSAP.

Anyway, my question is not even so specific to this very masonry example, so the problem i have here is: this example is based on a series of elements nested inside a multicolumn container. The number of columns is changed according to the window dimension and resizing, or rotation. But at that point all the elements are rearranged suddenly. Could i have a transition instead? I'm not so expert in css transition and i'm not sure that is the way, so very open to suggestions. Maybe GSAP could do the job?

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

[stagger entire timeline to different elements and child]

Ok, so, sorry for being so demanding, but what if i would like to have a random time between the activation of all of boxes? Or to have an ease effect, in the way that the first appear in a rapid sequence that slow down?

 

[stagger entire timeline to different elements and child]

Very cool and clean. Thanks

[stagger entire timeline to different elements and child]

Not entirely sure about how it works but but by changing some parameters i got the effect i wanted from your code, so thank you!

I'll check the methods i'm not familiar with. If you could add some comment would be great!

Thank you again!

 

 

[stagger entire timeline to different elements and child]

Hi all, I'm very new to GSAP, so here is my question:

let's say i've a page with different post or project elements, each one made by a container and all his childrena.

I've a timeline that define the animation i want to use to "unfold" this kind of containers, but since each one have the same sub-elements with the same classes, everything happen at the same time.

The staggerTo method would create a sequence just within the same element of each class in all the container at the same time.

 

Instead, i would like that each of those container unfold indipendently, or actually with a minimal delay between they all, each one fallowing the same timeline.

 

Is there a way to do that? Was my explication clear enough?

Thank you all!

 

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