Search the Community
Showing results for tags 'fadeout'.
Found 8 results
-
Hello! I just register to ask a question my programmer friend has. We want to create a website of our own, but he is puzzled as to how he can make images fade in and out when you reach a certain point in the text on the other side. We want the images to fade in or out and freeze to the specific image if text scrolling stops. I've searched the web for answers but with very limited luck i found answers... could you assist me and my friend? this is a very draft video editing i did but its kinda what we want the result to be. It will have multiple images that will changed every now and then according to how far you scroll down. test drive1.mp4
-
Hello teachers, I have this example, I need help with a combination of animations. The idea: With normal scrolling it stops at the top of the section (done) and with further scrolling it changes the content of the .container-sliders-wrapper (done) but i need the following animations: the img goes to the top and disappears with the fadeout and the text just fades and changes with the other text content on the slide I put a link with the real example: https://drive.google.com/file/d/1OKG0Ads2NYR1k073ERUrHwTQB9KuPofn/view?usp=sharing I hope I explained well and you can help me PD: I use vh value, please open the codepen an full view
-
Hi, Right now I am trying to change the conversation images on scroll down in the same position with smooth effects. I don't know how I can make this animation very smooth so that the User can read all the conversations very effectively. And On scroll up conversation image animation starts from first. - I want to change the image in the same position with a smooth effect on scroll down. - Image should be changed without any blink. - sometimes when scrolling down images got invisible on scroll. It should be fadeout first image and fade in the next image in the same position with smooth effect. I don't know but how could I achieve this effect? Does anyone know?
-
Hello! I'm doing app which returns cards from JSON array and it also have pagination. I found source code for fade in animation from web which works like a charm. I'm wondering how to make animation also Fade out. I have pagination which has 10 cards per page and when I click next page cards should fade out and after that next cards should fade in. Any ideas? I don't think I need to attach anything else than fade animation component? Here's the code I found: const FadeAnimation = ({ children, wrapperElement = "div", direction = null, delay = 0, ...props }) => { const Component = wrapperElement; let compRef = useRef(null); const distance = 5; let fadeDirection; switch (direction) { case "left": fadeDirection = { x: -distance }; break; case "right": fadeDirection = { x: distance }; break; case "up": fadeDirection = { y: distance }; break; case "down": fadeDirection = { y: -distance }; break; default: fadeDirection = { x: 0 }; } useEffect(() => { gsap.from(compRef.current, 1, { ...fadeDirection, opacity: 0, delay, }); }, [compRef, fadeDirection, delay]); return ( <Component ref={compRef} {...props}> {children} </Component> ); };
-
I'm trying to create a timeline section using GSAP ScrollTrigger animation. I've five text blocks (5 timeline elements) with five different images. By default, there will be only one text block visible but after scrolling the hidden text block(2nd text block) will fade up with 100% opacity and the opacity of the previous text block(1st text block) will decrease. When the third one will be active (visible via scroll), the first text block will vanish from the screen and the opacity of the second text block decrease . Note: By default, there will be only one active text block. But after scrolling there will be 2 text blocks one will be active with 100% opacity and another will be blur with 50% opacity. For the default state it is working fine but when I'm scrolling the previous text block is not vanishing from the screen. If you guys can take a look at what I did on codepen(https://codepen.io/shuvosd/pen/RwKZEEe) and help me to fix the issue then I will be really very thankful. Thanks in advance.
-
Hello, I'm new to GSAP and very happy with it so far. I have an interesting problem and I can't find any codepens or topics containing useful info. Actually I am not sure if this is even possible. What I'm trying to do: Elements are fading in inside a section, when you scroll to it. When you scroll past it the elements fade out again and when you go back up they fade in again. I'm using stagger to animate the elements inside the section. Is it possible on scroll up to reverse the stagger effect, I would like the elements to fade in from the last one to the first, but only when scrolling up. I know that using a negative value for the stagger does that, but I'm not sure if you can combine it with the toggleActions somehow. All ideas are welcome, thank you :)
-
Hey guys, I am new to all of this and trying really hard to create a banner where 3 lines of text stagger in ( from left to right ) then bounce and then slowly fade out. Would also love the option to repeat this every so many seconds. I have explored the repeat -1 option, but cannot find the option to repeat an action every so many second. Question: How can i fade out from where the animation last ended? Thank you guys in advance and Gsap is Awesome!
-
Hey guys, I have been struggling to achieve some ( i guess ) basic gsap stuff. What i want to achieve is a text that comes in from out of the screen to the center of the screen and then stays there for a couple of seconds and then moves out of the screen again. Now it is time for a new text that comes in from the left goes to the same position and moves out of the screen again. I tried to achieve this but the problem that i've encountered what that the 3 text items where overlapping eachother at the start. the other 2 text items need to be invisible when the 1st one moves to the center. step 1 : black screen. step2: fade in text 1 to the center of a div coming from the left side of the screen step 3: after a couples of seconds fade out text 1 and disappear. step 4 : text 2 becomes visable and fades in from the left to the center. step 5 : stays there for a couple of seconds --> moves out of screen again step 6: repeat process. I have also drawn to explain, since english isnt my native language. Thank you guys, greensock is awesome!
