How To: Div fade-out and div fade-in on scroll

[mathuse.dev]

I've been trying to work with GSAP since yesterday and I'm running into some problems and maybe some of you can point me into the right direction (I don't expect a full / complete solution). Let me explain it alongside my code:

 

Snippet from HTML with TailwindCSS:

<section id="intro" class="flex flex-col items-center relative bg-white text-black overflow-hidden">
	<div id="scrolling-text-1" class="w-full py-8 md:py-12 lg:py-16 xl:py-24 2xl:py-32">
		<div class="container grid lg:grid-cols-5 gap-8">
        	<div class="lg:col-span-2 py-12 sm:py-16 lg:py-20 xl:py-24">
            	<h5>Lorem Ipsum</h5>
                <h2 class="mb-12">Lorem ipsum dolor sit amet</h2>
            </div>
			<div class="lg:col-span-3 py-12 sm:py-16 lg:py-20 xl:py-24">
				<p class="text-lg font-grotesk font-medium my-12">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              	</p>
			</div>
		</div>
	</div>
	<div id="scrolling-text-2" class="w-full py-8 md:py-12 lg:py-16 xl:py-24 2xl:py-32">
		<div class="container grid lg:grid-cols-5 gap-8">
        	<div class="lg:col-span-2 py-12 sm:py-16 lg:py-20 xl:py-24">
            	<h5>Lorem Ipsum</h5>
                <h2 class="mb-12">Lorem ipsum dolor sit amet</h2>
            </div>
			<div class="lg:col-span-3 py-12 sm:py-16 lg:py-20 xl:py-24">
				<p class="text-lg font-grotesk font-medium my-12">
              	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              	</p>
			</div>
		</div>
	</div>
</section>

JS:

import gsap from "gsap/dist/gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger"
gsap.registerPlugin(ScrollTrigger);

// fade-in/out animation
let elem1 = gsap.to('#scrolling-text-1', {opacity:0, paused: true, y:"-50%"})
let elem2 = gsap.to('#scrolling-text-2', {opacity:0, paused: true, y:"0%"})

// pin section
ScrollTrigger.create({
  trigger: "#intro",
  start: "top top",
  end: "bottom top",
  pin: true,
  scrub: true,
  markers: true,
  animation: elem1
})

I have tried putting elem1 and elem2 into a timeline and executing elem2 after elem1 was finished but elem2 would never appear in the animation it would stay where it originally is. Here's the code from one of my attempts at trying to time elem1 and elem2:

 

JS (attempt at timing elem1 & elem2):

let elem1 = gsap.timeline({
  paused: true,
  onComplete: function () {
    elem2.play();
  }
});

elem1.to("#scrolling-text-1", { opacity: 0, y: "-50%" });

let elem2 = gsap.timeline({
  paused: true,
});

elem2.fromTo(
  "#scrolling-text-2",
  { opacity: 0, y: "50%" },
  { opacity: 1, y: "0%", ease: "none" }
);

ScrollTrigger.create({
  trigger: "#intro",
  start: "top top",
  end: "bottom top",
  pin: true,
  scrub: true,
  markers: true,
  animation: elem1,
});

I tried to run elem2 after the animation of elem1 was done but that didn't seem to work. Can anyone tell me why or push me into the right direction?

Thank you for reading and thank you in advance.

 

EDIT:

I tried this super simple addition with a timeline but to no avail.

let tl = gsap.timeline();
tl.to('#scrolling-text-1', {opacity:0, paused: true, y:"-50%"});
tl.fromTo('#scrolling-text-2', {y:"100%", opacity:0}, {y:"0%", opacity:1})

ScrollTrigger.create({
  trigger: "#intro",
  start: "top top",
  end: "bottom top",
  pin: true,
  scrub: true,
  markers: true,
  animation: tl //added timeline
})

 

Edited September 15, 2023 by mathuse.dev
Fixed title

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Trapti]

Hi, 

I am not sure what should be the end result you desire. Here is your code snippet working for 2 simple texts in a timeline with some correction. 

 

See the Pen LYMLRZj by tripti1410 (@tripti1410) on CodePen

 

 

[mathuse.dev]

@Trapti that's exactly what I had in mind, thank you. Only problem now is, that the second animation (#scrolling-text-2) doesn't work on my end. It just sits where it always sits and doesn't get animated despite using your solution (which obviously works). #scrolling-text-1 works fine

[Trapti]

Hi, 

 

If this is working in simple pen. Then there must be some issue in the HTML and CSS setup you have for your project.  

I will suggest now you bring the HTML and CSS of your project to the codepen and try to make it work. It will be easier to figure out the issue. 

[mathuse.dev]

@Trapti added it to a pen now and tried it with a modified version which makes use of timelines. The output is very similar to the one I'm having on my local system. It somehow wont work the way I expect it to. I want to have #scrolling-text-1 fade out and #scrolling-text-2 fade in at the same time, I also want to be able to see both during the transition phase, similar to this website

See the Pen XWogpjw by mathuseTMC (@mathuseTMC) on CodePen

 

EDIT: As you can see #scrolling-text-2 is unaffected by the animation which shouldnt be

[Trapti]

Hi, 

Animation is working fine it is the matter of timing. Animation finishes by the time the para is in the viewport. Change scroll trigger start and end accordingly to perfect the timing. 

Check this. Also, if only a paragraph needs to be animated, then target paragraph and not the entire container. 

See the Pen gOZRRRx by tripti1410 (@tripti1410) on CodePen

[mathuse.dev]

I need the entire div not only a paragraph but that's a quick fix. You said something about timing and I tried setting the end behind the second div but to no avail, it just stays put and doesn't get animated. There has to be something I'm doing wrong here, right?

[Trapti]

The code is working fine as I said. 

tl.to("#scrolling-text-1", { y: "-50%", opacity: 0 }).fromTo(
  "#scrolling-text-2",
  { y: "0%", opacity: 0 }, {opacity: 1, color: "red"}
);

This is code snippet of your pen. I just added color: red. that animates means it's working. Also, y: 0 is not doing anything and it just changing the opacity. 

[mathuse.dev]

I saw that, thank you for your help. Through some trial and error (well, a lot of it) I created a solution that comes pretty close in terms of what I want to do and I'm going to share this here in case anyone might need this in the future.

 

See the Pen XWogpjw by mathuseTMC (@mathuseTMC) on CodePen