Nick.Ls

December 13, 2023

Good day Jack @GreenSock,

The codepen is a mess of testing and retesting but you are right! That's what I need...

Scrollsmoother was set in my live demo, not the codepen. Either way this looks like a solution!

Let me try and I'll let you know...

Thanks!

December 11, 2023

Hello forum!

I can't see any configuration at this point that can work for my setup... Can't find any set of options that won't break the scrolltriggers once the scrollsmoother is enabled?

Any suggestions? Why do scrolltriggers lose their trigger position with scrollsmoother enabled?

December 8, 2023

Codepen updated with solution (as it seems so far).

It looks like the additional scrolltriggers that I want to autoplay can be triggered (with lots of manual calculation of percentages), using the

pinnedContainer: true option with PreventOveralps and fastscrollEnd to prevent overlapping of animations (in a most complicated scenario of course).

The issue I am facing now is that enabling scrollsmoother the scrolltriggers don't fire. Any ideas why?

December 7, 2023

Yeah kind it is @mvaneijgen

Either creating scrolltriggers withing the pinned scrolltrigger or timelines that will trigger based of the progress onUpdate() of the pinned scrolltrigger, there has to be a manual calculation of the timings and the entry / exit points. PreventOveralps and fastscrollEnd is also a must eitherwise animation will still stuck up on each other and break.

I am still trying to figure it out... if I find a solution I'll let you know...

December 7, 2023

Looks like observer is great for repeatable sections but in my case basically what I am trying to achieve is to create scrolltriggers of different timelines inside

the pinned scrolltrigger.

The scenario is I have a pinned section where a scrub timeline animates through scrolling whilst a bunch of other timelines need to be animated at specific positions of the pinned section's progress.

I hope I gave you a better view of my total sequence and what I try to achieve.

Any other suggestions are welcome!

December 7, 2023

Interesting approach @mvaneijgen !!!

I haven't worked with observer before but it looks like a solution already. Let me take a look at it and try it out and

I'll get back to you.

Thanks!

December 7, 2023

Codepen added!

As you may see, fast scrolling forwards or backwards breaks the animation...

December 7, 2023

Greetings magnificent forum!

Firstly, let me explain my setup. I have a container that is pinning for a large amount of time. During the pinning of that section I have a secondary (paused) timeline where I have created the total sequence I would like to be animated in parts, breaking each part with an .addPause(). The pinned timeline's onUpdate function is calling out the play(), reverse() functions in the secondary timeline based on its progress.

What I trying to achieve is to create a timeline that will play / pause / resume and reverse based on my scrolling direction without overlapping or breaking the animation.

My code as follows:

let sec1Step_2_skipper = false;
let sec1Step_3_skipper = false;
let sec1Step_4_skipper = false;
let sec1Step_5_skipper = false;
let sec1Step_6_skipper = false;

// STEP #1
let sec1Step_1 = gsap.timeline({
    scrollTrigger: {
        trigger: "#section1",
        start: "top top+=1%",
    },
    ease: "none",
});

sec1Step_1
.from(sec1BG, { duration: 1, scale: 1.1 })
.to(overlay_1, { duration: 1, yPercent: -100 }, 0.25)
.to(splitter_1, { duration: 1.5, "--translate-positive": "0%", "--translate-negative": "0%" }, 0)
.to(splitterText_1, { duration: 1.5, clipPath: "inset(0% 0%)" }, 1.4)
.to(splitter_1, { duration: 1, "--left-positive": "110%", "--left-negative": "-10%"}, 1.5)
.from(iraklisLogo, { duration: 1, opacity: 0, yPercent: 110 }, 2.5)
.to(".mouse", { duration: 1, opacity: 1 });

// STEP #2
let sec1Step_2 = gsap.timeline({
    paused: true,
    ease: "none",
});

sec1Step_2
.addLabel("label2")
.to(iraklisLogo, { duration: 0.5, opacity: 0, yPercent: 110 })
.to(".mouse", { duration: 0.5, autoAlpha: 0 }, "<")
.to(splitterText_1, { duration: 0.5, clipPath: "inset(0 100%)" })
.to(splitter_1, { duration: 0.5, "--left-positive": "50%", "--left-negative": "50%" }, "<")
.to(splitter_1, { duration: 1.5, "--left-positive": "110%", "--left-negative": "-10%"})
.to(splitterText_2, { duration: 1.45, clipPath: "inset(0% 0%)" }, "<")
.addPause()
.addLabel("label3")
.to(splitterText_2, { duration: 0.5, clipPath: "inset(0 100%)" })
.to(splitter_1, { duration: 0.5, "--left-positive": "50%", "--left-negative": "50%" }, "<")
.to(splitter_1, { duration: 0.5, opacity: 0 })
.set("#section1 .spacer", { display: "block" })
.addPause()
.addLabel("label4")
.to(splitter_2, { duration: 0.5, autoAlpha: 1 })
.to(splitter_2, { duration: 1.5, "--translate-positive": "0%", "--translate-negative": "0%" }, "<")
.to(splitter_2, { duration: 1.5, "--left-positive": "110%", "--left-negative": "-10%"})
.to(splitterText_3, { duration: 1.5, clipPath: "inset(0% 0%)" }, "<")
.addPause()
.addLabel("label5")
.to(splitter_2, { duration: 0.5, "--left-positive": "50%", "--left-negative": "50%" })
.to(splitterText_3, { duration: 0.45, clipPath: "inset(0 100%)" }, "<")
.to(splitter_2, { duration: 1.5, "--left-positive": "110%", "--left-negative": "-10%"})
.to(splitterText_4, { duration: 1.45, clipPath: "inset(0% 0%)" }, "<")
.addPause()
.addLabel("label6")
.to(splitter_2, { duration: 0.5, "--left-positive": "50%", "--left-negative": "50%" })
.to(splitterText_4, { duration: 0.45, clipPath: "inset(0 100%)" }, "<")
.to(splitter_2, { duration: 0.5, "--splitter-opacity": 0, "--splitter-visibility": "hidden" });

// PINNING TL
let steps = [
    { start: 0.15, end: 0.30, label: "label2", skipper: sec1Step_2_skipper },
    { start: 0.30, end: 0.35, label: "label3", skipper: sec1Step_3_skipper },
    { start: 0.35, end: 0.50, label: "label4", skipper: sec1Step_4_skipper },
    { start: 0.50, end: 0.80, label: "label5", skipper: sec1Step_5_skipper },
    { start: 0.80, end: 0.87, label: "label6", skipper: sec1Step_6_skipper },
];

let sec1Pin = gsap.timeline({
    scrollTrigger: {
        trigger: "#section1",
        start: "top+=5% top+=1%",
        end: "+=500%",
        pin: true,
        anticipatePin: 1,
        scrub: 2,
        fastScrollEnd: true,
        onUpdate: (self) => {
            const progress = self.progress.toFixed(2);
            let direction = self.direction;

            for (let step of steps) {
                if (progress >= step.start && progress <= step.end) {
                    if (direction === 1 && !step.skipper && !sec1Step_2.isActive()) {
                        sec1Step_2.pause();
                        sec1Step_2.play(step.label);
                        step.skipper = true;
                    } else if (direction === -1 && step.skipper && sec1Step_2.isActive()) {
                        sec1Step_2.pause();
                        sec1Step_2.seek(step.label);
                        sec1Step_2.reverse();
                        step.skipper = false;
                    }
                }
            }
        },
    },
    ease: "none",
});

sec1Pin
// STEP #1
.fromTo(sec1BG, { rotate: 90, scale: 2 }, { rotate: 0, scale: 2.4 })
// STEP #2
.to(sec1BG, { scale: 1 }, "+=25%")
// STEP #3
.to(sec1BG, { clipPath: "circle(12% at 50% 50%)" }, "60%")
.to(".shape.shape-g", { x: "0%", scale: 3.5}, "60%")
.to(".shape.shape-p", { x: "0%", scale: 3.5}, "60%")
// STEP #4
.to(sec1BG, { clipPath: "circle(0% at 50% 50%)" }, "78%")
.to(".shape.shape-g", { x: "-50%", scale: 1}, "78%")
.to(".shape.shape-p", { x: "-50%", scale: 1}, "78%")
// STEP #5
.to(".shape.shape-g", { x: "-40%", y: "-60%" }, "90%")
.to(".shape.shape-p", { x: "-65%", y: "-39%" }, "90%")
.to("#section1 .logoText", { opacity: 1, x: "0%" }, "90.1%")
.to(".shape.shape-g", { x: "-80%", y: "-60%" }, "90.1%")
.to(".shape.shape-p", { x: "-105%", y: "-39%" }, "90.1%")
// STEP #6
.to("#section1 .logoText #logo_S", { fill: gsap.getProperty("html", "--color-green") }, "91%")
.to("#section1 .logoText #logo_P", { fill: gsap.getProperty("html", "--color-green") }, "91%")
.to("#section1 .logoText #logo_T", { fill: gsap.getProperty("html", "--color-green") }, "91%")
// STEP #7
.to("#section1 .text-gradient", { clipPath: "inset(0% 0% 0% 0%)" }, "91%")

At this point is working mostly as intended with the difference that if I fast scroll forwards the timeline will pause or break at some point without completing.

Also, I've tried to create multiple timelines and call each one of them based on pin progress but the same problem occurs more or less...

Any suggestions on how to manipulate a long timeline like this?

Thank you!

See the Pen mdvvqeJ by Nick_Ls (@Nick_Ls) on CodePen

October 5, 2023

Thanks for the quick reply Jack!

It's not more of a to-do request to be honest as more as a theoretical question to try accommodate an extra feature inside

my already tweaked slider for future use instead of just creating the scenario I am looking for atm.

I believe this will be the next weekend side task for me.

Thanks again!

October 5, 2023

Hi everyone!

Quick question on the topic... Can we make the horizontal loop non repeatable? Just keep all the other features

without having the elements to repeat on the end?

Is it a bad approach to try doing this in this setup rather than just create a draggable container or so? 🤔

July 19, 2023

13 minutes ago, Rodrigo said:

Hi,

This is something I did a few years ago using THREEJS:

Basically the idea is to update individual points on the Z axis in order to create the effect. I don't know a lot of THREE and this was something I kind of reversed engineered back in the day, but thought it might help. You would have to change the image being used, make it fully responsive (I don't know if it's working properly in that way) and adjust the camera position and lights, but hopefully it would shed some idea.

Happy Tweening!

Hi @Rodrigo,

Thanks for sharing, I will give it a try!

July 19, 2023

Hi everyone!

I have been troubling myself to create a background svg animation. The concept is a topographic map in a svg, that will have the effect of water movement (displacement).

I have created several different setups in order to achieve this but in most cases I end up with distorted / breaking lines as in the codepen which is bad because I need the lines to be kept smooth.

The most efficient way to do this so far without any breaks is to morphSVG the paths from A to B to C and so on to create the final effect BUT since the paths are way to many and the alterations of it bring even more paths it is a great setup for me. Very time consuming setup.

In the codepen example I tried creating a Turbulence which brings almost the same result as morphing all the paths but the main problem of the line weird render / break occurs.

Last I've tried pixiJs and something similar to https://pixijs.com/examples/filters-basic/displacement-map-flag

where I got a better render on the lines, not perfect, not ideal, just better.

I am open to suggestions or similar implementations if anyone has a better view on this.

Thank you all for your time!

See the Pen ExOLMmG by Nick_Ls (@Nick_Ls) on CodePen

April 19, 2023

Well @aerra,

this seems like a solution to your request. I will try and give it a better look later on and come back with any findings if so.

Nice!

April 19, 2023

Greetings aerra,

The helper function used for this example, as I see it, is built to maintain and calculate the widths of the container and the respective items beneath.

You surely can achieve a similar example to vertical slider / carousel with gsap but I would go with a fresh approach. There are a lot of examples

based on gsap3 if you search for it in order to find a starting point.

Last but not least, post your codepen example here if you make any progress and lot's of people will guide you through to your questions.

I believe the experts will correct me if I am wrong about the helper function.

Wish you a good day!

December 14, 2022

Giving a solution on the problem if someone ever comes up with something similar.

On ideal scenarios page load speed, DOM elements, js files etc run optimal or are precached so the scroll will occur as intended. On the other hand it looks like in a real scenario the images I have placed create the scrolling height and all the elements must be already loaded to calculate everything correctly. Therefore I used imagesloaded.js where I run the scrolltriggers AFTER the images on the section are loaded and everything works like a charm.

Hopefully it can be a solution to someone else too out there.

Once again, thanks @Rodrigo for the time spent looking into it and this amazing community / forum!

December 14, 2022

Hi @Rodrigo,

Thanks for your reply. You are right in most of it. Giving it some space indeed works better. The margin on body top is just some space which I don't actually use in my live project.

I have tried the above setup with infinite variations ( 😋 ) at this point to make it work in the most optimal way but in every situation I keep coming across with the same problem. The scrolltrigger height is not calculated properly in every refresh of the page.

Same applies to your codepen too... Check the image I am attaching below.

The 3rd card does not pin exactly at the same position as the others and the Scrolltrigger end event fires a bit sooner giving us with the above result.

Refreshing the page you'll notice that it fixes the problem but refreshing the page is not a solution.

I was thinking of a doc ready function before initialization in order to have the content loaded before letting the scrolltrigger calculate the height might work...

Any other ideas?

December 13, 2022

Another finding is that the ending height is not calculated correctly when I hard clear cache on browser which breaks things instead of a simple

refresh where I get the right height to scroll...

December 13, 2022

Hey everyone,

I was creating a similar section in my project like the one I am attaching below:

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

and it worked just fine until I imported ScrollSmoother. Adding smoother seems

that it breaks the end points (?). Attaching codepen with smoother added as

reference too.

P.S. In my website setting the pinSpacing to true seems to make things a bit better but still out of sync.

Any ideas? Thank you in advance!

See the Pen RwJzgPg by Nick_Ls (@Nick_Ls) on CodePen

August 30, 2022

Hi Jack,

I have used your solution already, thanks for that!

And thanks for the info provided.

August 30, 2022

Hi Jack!

I am sending you over a codepen, same setup but smoother 3.11.0 instead of the 10.4 you are using... check the console for the error.

Same thing will not occur if you replace the smoother version 10.4 on my codepen.

Let me know if I can be more of assistance!

See the Pen xxWvLKW by Nick_Ls (@Nick_Ls) on CodePen

August 29, 2022

Hello everyone,

I have downloaded the latest version of ScrollSmoother along with GSAP 3.11.

In my effort to get velocity on smoother update as used in documentation and as I have used before, it now comes

with a console error of function not found. I used a previous version of ScrollSmoother and it works fine. If you

feel to look into it be my guest

Ty all!

June 1, 2022

Hey Jack,

That is truly a rework! Yes, it helps a lot! My code did the work but this is educational the least. I am going to break down the code to see

what you actually did. Very helpful!

Thanks again!

May 31, 2022

Oh thanks @Cassie,

I hadn't noticed that bug... Guess the "lottery spinner" didn't land on 1 or 2 to see the error. You're right!

Nice!

May 31, 2022

Here you go,

It's a copy from the draggable carousel on Helper Function with some additions to calculate the middle item. I have commented on the code

so you can with ease the additions. And of course I am available if someone needs some further clarification.

(the red box that appears is your center element)

See the Pen mdXxLXJ by Nick_Ls (@Nick_Ls) on CodePen

May 30, 2022

Hi Jack,

I have used the drag carousel from the helper functions where with tl.current() I retrieve the index increment it to match the center index always and then I pass as a class as I intended to do from the beginning. And it works!

I can give you a demo for future reference if you need.

Thank you for your interest though! Helper function gave me what I needed it to move on.

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Nick.Ls