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. https://codepen.io/antonio78/pen/LYMvOjL

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. https://codepen.io/antonio78/pen/VwqNMRm

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%' )

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

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?

Just out of curiosity, might it be better to develop a reverse logic than I have done so far? Instead of starting from the initial situation, setting the position of the panels via css and animating them with timeline.to, could I set the final position and then animate with timeline.from?

The code is mine; it is a simplified version of an animation I am developing for a website. You know how it is, sometimes I get a good result but I miss that little bit that I would never think of. For example, I would never think of adding a step to the same animation but before and outside the loop. It is a simple solution, but you need someone to show you that it can be done. Thank you.

Thank you for your reply. The first panel should start shrinking when the second one starts coming up, so that you can't see the gap between the first one and the others.

This is the pen I was referring to, it is similar to what I want to achieve, but I need the panels already stacked at the beginning except for the first one (as in the image on the left). Perhaps it is a starting point, but I do not understand whether my approach is on the right track or completely to be redone.

Hi everyone, I am trying to achieve an effect similar to the card stack effect seen in another thread. In my case it is panels rather than cards, but I need the first panel to be already in place and the others to have the animation applied. The panels have a two-part animation, they need to go up first and then scale. What I can't get is that when the second panel starts the animation, the first one scales, that is, it only does the second part of the animation. At the end of the animation the 4 panels have to be stacked and scaled. Then when the whole sequence is finished, the page can start scrolling again. I hope I have made myself clear. Thank you.

I am familiar with this article but will definitely have to read it again. I have another question, just out of curiosity. At first I make the logo fade in with a css class, but then I make it fade out with a gsap action. I usually do it this way: what can be done with css I do with css, what is more handy to do with gsap I do with gsap. Is it wrong to use this kind of mixed technique on same elements?

Thank you PointC, this seems to work. Just one question, is this the way it is supposed to work? I mean, the tween should start only when the trigger passes the starting point, it should not be necessary to use immediateRender:false. If I add an onComplete event, it starts right after the page loads, so I assume that the tween starts anyway sooner than it should. Is there something I'm missing?

Here is the pen. As you can see there is a #logo_header that starts already faded out because of the animation: gsap.to('#logo_header', {duration: 3, autoAlpha: 0}). https://codepen.io/antoniostarace78/pen/poppOdR

Hi OSUblake, It's not easy to provide a demo but I can show you the website, hope it helps. The #header_logo element should be hidden at start, then become visibile after 200px scrolling, then fade out when #logo_footer enters the viewport at 80%. The code is in main.js at line 196. Thank you.

Hi, I've been trying to do a simple scrollTrigger action: an elements that enters the viewport makes another element fade out, that's it. But this time the action starts on page load and not when my triggers pass the scroller-start. This is my code. I tried to set a longer duration to see what happens but the #header_logo starts at opacity 0 without tweening, as If I had set gsap.set instead of gsap.to. Do you see anything wrong with my code? Thank you. ScrollTrigger.create({ trigger: '#logo_footer', start: 'top 80%', end: 'bottom 20%', animation: gsap.to('#header_logo', {duration: 1, autoAlpha: 0}), markers: true })

Your solution does not seem to solve my issue but it gave me a good hint. I changed my code in this way .to('#navigation', {duration:0.01, 'pointerEvents':'all'}) .addLabel('pause_menu') .to('#navigation', {duration:0.01, 'pointerEvents':'none'}) This seems to work as I intended. Thank you.

Hi, I can't make this animation do what I want it to do, I can not understand why. I have a button that calls function menuAnimation which plays my timeline, based on condition whether variable is_menu_active is true or false. My problem is that the tween from START_MENU to PAUSE_MENU skips pointerEvents:all, does not stops at label ''pause_menu, then goes to the next step pointerEvents:none. What is wrong with this code? Thank you. btn_menu.addEventListener('click', (e) => { e.preventDefault(); menuAnimation(); }); var tl_menu_animation = gsap.timeline({ defaults:{ ease: "power2.inOut" }, paused:true }); tl_menu_animation.addLabel('start_menu') .set('#nav_left,#nav_right', {autoAlpha:1}) .to('#nav_left,#nav_right', {duration:0.7, scaleX:1}) .to(nav_elems, {duration:0.4, autoAlpha:1}) .set('#navigation', {'pointerEvents':'all'}) .addLabel('pause_menu') .set('#navigation', {'pointerEvents':'none'}) .to(nav_elems, {duration:0.2, autoAlpha:0}) .to('#nav_left,#nav_right', {duration:0.4, autoAlpha:0}) .set('#nav_left,#nav_right', {autoAlpha:0}) .set('#nav_left,#nav_right', {scaleX:0}) .addLabel('end_menu'); function menuAnimation() { if(is_menu_active) { tl_menu_animation.tweenFromTo('pause_menu', 'end_menu'); is_menu_active = false; } else { tl_menu_animation.tweenFromTo('start_menu', 'pause_menu'); is_menu_active = true; } }