Staggered zoom and crossfade switching images

[Antonio78]

Hello everyone, I will try to explain as best I can the effect I am trying to achieve.

 

It's a staggered zoom effect with a crossfade effect to switch images between the zoom-in and zoom-out. I put a play button to run the effect, but once it works it will have to go into play by itself. For now there are only 3 images as demo, but it will have to work for N images and go in a loop.

 

From an old thread I found a function that seems useful but I can't figure out how to integrate it into my code.  Instead of using gsap I could of course use a timeline. I put everything commented in the pen.

 

I cannot figure out the logic to achieve the complete effect.

 

I hope I have made myself clear. Do you have any ideas?

 

 

See the Pen RwEONYw by antonio78 (@antonio78) on CodePen

[Rodrigo]

Hi,

 

I read this question a few times and I'm not 100% I understand what you're trying to do or what's the issue you're having, maybe I'm missing something obvious here, sorry 🤷‍♂️

 

I did my best in guessing what you're after and came up with this, using repeat, yoyo and repeatDelay, assuming that you want this to revert from the outer image to the center one:

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

 

https://gsap.com/docs/v3/GSAP/Timeline#special-properties-and-callbacks

 

Hopefully this helps.

Happy Tweening!

[Antonio78]

Hi Rodrigo,

Thank you for your reply, but I probably didn't make myself clear. What you have done is basically what I had already done, I will try to explain myself better.

 

As you can see, I have 3 divs with class cdv_home_top_img and inside there are 3 images.

 

cdv_home_top_img x 3

> img 1

> img 2

> img 3

 

Each cdv_home_top_img is associated with one of the circles: inner, middle and outer.

 

The sequence should be starting like this:

 

Inner  ->  img 1

Middle  -> img 1

Outer  -> img 1

 

Then:

 

Inner zoom-in -> crossfade to img 2 -> inner zoom-out

Middle zoom-in -> crossfade to img 2 -> Middle zoom-out

Outer zoom-in -> crossfade to img 2 -> Outer zoom-out

 

Inner zoom-in -> crossfade to img 3 -> inner zoom-out

Middle zoom-in -> crossfade to img 3 -> Middle zoom-out

Outer zoom-in -> crossfade to img 3 -> Outer zoom-out

 

Inner zoom-in -> crossfade to img 1 -> inner zoom-out

Middle zoom-in -> crossfade to img 1 -> Middle zoom-out

Outer zoom-in -> crossfade to img 1 -> Outer zoom-out

 

and so on...

[mvaneijgen]

Something like this? Personally I always like to make a working animation first, before I start optimising, because what is there to optimise if it isn't even working yet. So I've written even step out of the animation, so you can see patterns emerge and it will be easier to optimise.

 

See the Pen WNLWEQv?editors=1001 by mvaneijgen (@mvaneijgen) on CodePen

 

You probably want a seamless loop, so I recommend taking a look at @Carl tutorial 

 

 

Hope it helps and happy tweening! 

[Antonio78]

Hi mvaneijgen, thank you. 

I honestly thought it was easier to understand, but maybe I am not making myself clear enough.

 

The overall behavior should be similar to my first demo, no pauses between animations and no slowdowns. And as I wrote in my js code, the crossfade should occur between zoom in and zoom out moments. Zoom-in -> crossfade -> zoom-out.

 

  pageTop.to('.cdv_home_top_img', {
    duration: 0.5,
    scale: 1.3,
    stagger: {
      each: 0.1,
      from: 'end'
    },
    ease: 'power2.inOut'
  })

// HERE GOES THE CROSSFADE

  pageTop.to(
    '.cdv_home_top_img',
    {
      duration: 0.5,
      scale: 1,
      stagger: {
        each: 0.1,
        from: 'end'
      },
      ease: 'power2.inOut'
    },
    '<75%'
  )

 

[mvaneijgen]

Ok, I had tweaked the animation a bit, but you could just set the animation between the two, but be sure to tweak the animation to your liking to get to see how it works.

 

It is really hard for us to figure out what the exact animation is you want, so again, tweak the pen and post back a demo you've forked and tell us what is not working for you or what you want to see different. That way we come faster to what animation you want. 

 

See the Pen bGOJooY?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Antonio78]

Ok, now your demo is close to my idea. I tweaked a bit the delay to overlap the ending of each animation, timing can still be improved, but the basis I think is good.

What is still not right is that the crossfade effect must be staggered and be performed first in the inner circle, then in the middle circle, and then in the outer circle.

 

Now that I think about it, maybe it might be easier to make two different and overlapping timelines?
One timeline performs the zoom effect on the circles and the other performs crossfades on the images.

 

See the Pen VwqNMRm by antonio78 (@antonio78) on CodePen

[mvaneijgen]

I would just add a stagger to the opacity tween. Per my first pen I'd used the position parameter to animate the opacity with going down, but you could also do that with the scale up animation.

 

See the Pen gOZyXwz?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

It is your animation of course, but personally I find this more dynamic, the opacity tween now starts at 50% of the previous tween. In my original demo I'd tried to do that, but with the scale down animation.  Hope it helps and happy tweening! 

 

See the Pen BavEmWq?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Antonio78]

We are getting closer, I corrected the timing a little more. I think now we just need to rewrite so that they are loops.

 

See the Pen LYMvOjL by antonio78 (@antonio78) on CodePen

[mvaneijgen]

Yep, that is just logic, really check out @Carl's tutorial, it is the best one for it. You don't have to do it exactly how he does it, but it explains what you need perfectly.

 

Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. Where now at version 4 or so, so you got some time to go still. Good luck and happy tweening!