Fix Ending & Animate text depending on scrolled Image

[Yannick_SG]

Hello community,

 

I'm a complete beginner, but have implemented a vertical scroll on my Website (Scroll down to the end of the page).

 

Currently, there are still placeholder images, but soon there will be 8 images, each representing one layer of a mat, we are selling soon. That's why I want to scroll through the images.

 

I would be thankful, if someone could help me with 2 things:

 

1. Probably simple to solve, but I can't: Scrolling down through the images works fine. But when I reverse my animation by scrolling back up, there is a short "entry/exit" animation. I use Elementor, I couldn't really copy it in CodePen, but I made a short video here: Loom Video I just want to neatly switch between the normal website scrolling and image scrolling in the section.

 

2. On the right side, there are 8 textboxes, each with the class "description-1", "description-2", etc. My goal is to highlight one text at the time, which is linked to the image. So if Image 3 is visible, text 3 should be highlighted. I tried a lot to solve it, but I just can't get the hang of it.

 

This is my current code:
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', (event) => {

        gsap.registerPlugin(ScrollTrigger);
        gsap.set(".panel", { zIndex: (i, target, targets) => targets.length - i });

        var images = gsap.utils.toArray(".panel:not(:last-of-type)");

        console.log(images);

        const tl = gsap.timeline({
            scrollTrigger: {
                trigger: "#animation-section",
                markers: true,
                pin: true,
                start: () => "top top",
                end: () => "+=" + (images.length + 1) * window.innerHeight,
                invalidateOnRefresh: true,
                scrub: true
            }
        });

        var _images = gsap.utils.toArray(".panel");

        _images.forEach(function (section, index) {
            console.log(section);
            ScrollTrigger.create({
                trigger: section,
                start: () => "+=" + index * window.innerHeight,
                end: () => "+=" + (index + 1) * window.innerHeight,
                markers: true,
                animation: gsap.timeline({
                    scrollTrigger: {
                        trigger: section,
                        start: () => "top top",
                        end: () => "+=" + (index + 1) * window.innerHeight,
                        scrub: true,
                        immediateRender: false
                    }
                })/*
                .to(`.description-${index + 1}`, {
                    className: "+=highlighted-text"
                })
                .to(`.description-${index + 2}`, {
                    className: "-=highlighted-text"
                })*/
            });
        });

        images.forEach((image, i) => {
            tl.fromTo(
                image,
                {
                    yPercent: 0,
                    opacity: 1
                },
                {
                    xPercent: 0,
                    yPercent: -100,
                    rotateZ: 0,
                    opacity: 0,
                    duration: 0.5
                },
                "+=0.1"
            );
        });

        tl.set({}, {}, "+=0.1");
    });
</script>

 

Solving Number 1 would be very important for me, Number 2 would be awesome to include, but hasn't (yet) been asked from my contractor.

[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 (avoid frameworks if possible). 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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

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

[mvaneijgen]

Hi @Yannick_SG welcome to the forum!

 

6 hours ago, Yannick_SG said:

I couldn't really copy it in CodePen

 

That is correct and this is also what we do not ask of you, what we do want is a minimal demo with some colored divs, just a simple version demonstrating your issue. 

 

Sorry we can't really debug live websites, there is just no way to modify the code or even inspect it. Try creating a minimal demo of what you're trying to do, this has two benefits. First this allows you to experiment and try out new ideas. By making it simple people usually solve 90% of their own bugs. Second, you have an easy version you can share in which anyone could edit and modify the code.

 

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.

[Rodrigo]

Hi,

 

For what I can infer from your post maybe you're looking for something like this example by @akapowl

 

Hopefully this helps.

Happy Tweening!

[Yannick_SG]

Thanks for the quick replies!

I was able to solve part 1, as indeed it was an issue with Elementor (it seems so to set a standard Animation Duration). To get to part 2, I'll try around with CodePen.