Antonio78
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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
-
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?
See the Pen RwEONYw by antonio78 (@antonio78) on CodePen
-
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.
See the Pen XWygEjz by antonio78 (@antonio78) on CodePen
-
14 hours ago, PointC said:
You have a situation where you're animating the same property of the same element with two ScrollTriggers. The values are cached up front when the ST is created so, in this case, we need to set immediateRender:false on the second one. Another option would be to use a fromTo() tween.
This is discussed in more detail here:
Happy tweening.
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? -
49 minutes ago, PointC said:
animation: gsap.to('#logo_header', {duration: 3, autoAlpha: 0, immediateRender:false}),
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}).
See the Pen poppOdR by antoniostarace78 (@antoniostarace78) on CodePen
-
2 hours ago, OSUblake said:
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; } }
Staggered zoom and crossfade switching images
in GSAP
Posted
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