Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by pileoni

  1. 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

  2. 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

  3. 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