[ScrollTrigger - Horizontal scroller and image scaling]

@Rodrigo

 

Hello,

 

Indeed, your example works as expected and allowed me to see where my mistake was (even if I don't understand the problem).

I was installing gsap this way and the version is 3.6.1.

"gsap": "./gsap-bonus.tgz"

But if I use the same thing as you, gsap is in version 3.11.5.

"gsap": "file:gsap-bonus.tgz"

I have done some testing and the problem is with yarn.

When I do $ npm install ./gsap-bonus.tgz, it creates the right entry in the package.json (with the file:).

 

But when I use yarn, $ yarn add ./gsap-bonus.tgz, it doesn't put it automatically.

 

I have the same problem on your example.

 

Thanks for your time,

[ScrollTrigger - Horizontal scroller and image scaling]

Hello @akapowl,

 

21 hours ago, akapowl said:

Sorry, but I don't have the time to create a Nuxt project right now for testing this; if you need any assistance, please provide a minimal demo. If you're using something like Nuxt, you could use StackBlitz for example.

 

There is a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

I can't test it with Stackblitz because I need to pay and that's not possible actually. I'm gonna try to install gsap without gsap-bonus.tgz

 

21 hours ago, akapowl said:

Which version are you speaking of; my code using the containerAnimation feature or your code from the initial example?

 

Because if it is your initial code example you are referring to, that won't work by simply just setting the start to using 'left somewhere' as its value. 

If I copy/paste your CodePen into my project, that's not working, but only if I install gsap with gsap-bonus.tgz.

If I do a classic installation of gsap (npm install gsap), that's working.

 

21 hours ago, akapowl said:

Using singular parameters like that is invalid, btw - ScrollTrigger's start and end always need two parameters in their string-syntax; one for the trigger-element and one for the viewport.

Yes, I know that, that was just for here.

 

21 hours ago, akapowl said:

Also,left and right will only fulfill their purpose in either native-horizontal scrolling with horizontal: true set on the ScrollTrigger or in ScrollTriggers with the containerAnimation property set. 

 

So I'm rather confused - and I can't be much more helpful than that without a minimal demo of some sorts.

Maybe am I missing something but in your Codepen you didn't used horizontal: true anywhere, but 'left somewhere' and 'right somewhere' are working as expected.

 

I didn't set  horizontal: true on my project and that's working too now, so I don't really understand.

[ScrollTrigger - Horizontal scroller and image scaling]

@akapowl

After several tests, I wonder if the problem would not come from the gsap-bonus.tgz.

 

I develop on a Nuxt, so I use the package NPM gsap installed with the gsap-bonus.tgz.

 

When I use this package, the ScrollTrigger start: 'left' does not work. It's exactly like if I do a start: 'top'.

 

But if I remove this package, install gsap classically with npm and add the ScrollTrigger link that we use in CodePen, then everything works fine.

 

In both cases, the version of Gsap is the same, i.e. 3.11.5.

I don't know how I can get the ScrollTrigger version to check that it's the same in both cases.

 

I'll keep investigating, but can you check on your side that everything is ok on this level?

[ScrollTrigger - Horizontal scroller and image scaling]

I will continue to work with containerAnimation. It allows me to do one less ScrollTrigger, so I have a bit more performance.

 

I just realized that I have a problem on my real project with ScrollTrigger, since it does not take into consideration right and left. It uses it as up and down.

 

I'll see if I can fix that, but that's why I couldn't do what I wanted.

 

Thank you very much for your example, it's exactly what I was looking for. 

[ScrollTrigger - Horizontal scroller and image scaling]

Hi @akapowl, thanks for your answer

 

I am aware of containerAnimation but in my mind, it is not so simple to set up.

 

My horizontal scroll is set up on my section which contains 11 items that should animate as they appear.

 

If I want to do this with the AnimationContainer, I have to get the percentage of progress of the Horizontal Scroll and then do several calculations to animate the image according to the right section that is displayed.

 

But maybe I didn't understand how it works, I'll try to set it up again.

[ScrollTrigger - Horizontal scroller and image scaling]

Hello,
 

I am trying to set up a horizontally scrollable section that pinches. In this section, there are images that appear with a scale of 0.75 and that must be at a scale of 1 in the middle of the page.
 

The pin and the horizontal scroll are well set up and working, but I can't finish the animation of the images at the exact center of the page.
 

I made a simplified Codepen, with my divs and images. The black bar represents the center of the page and the blue bars the center of the images.
 

What I would like to achieve is that when the blue and black bars overlap, then the end bars of the ScrollTrigger also cross.

 

I don't understand what the problem is.

 

Does anyone have an idea? See a solution?

 

Thank you, 
Simon

See the Pen zYmKRPE by simon-gioffredi (@simon-gioffredi) on CodePen

[ScrollSmoother - Add effect in the middle of a page]

Hi,

 

Yeah, that's perfect. I just added a different y value to delay a little the title apparition, but that's perfect

 

Thank you 

[ScrollSmoother - Add effect in the middle of a page]

I finally finished this animation.

 

See the Pen qBoVLxx by simon-gioffredi (@simon-gioffredi) on CodePen

 

I think there is a better way to do it because I got some performance issue sometimes. Someone has an idea ?

[ScrollSmoother - Add effect in the middle of a page]

Hi @Cassie

 

Thank you so much for your work. 

I work on this actually but I don't know if that's a good way to do it

See the Pen dymZqvm by simon-gioffredi (@simon-gioffredi) on CodePen

 

Both of our solutions are not perfect, because there is only 1 image which moves.

 

And I need the slide to be in relative position, because the title give us the slide height.

 

I'm gonna continue to work on it

[ScrollSmoother - Add effect in the middle of a page]

Hi Cassie,

 

I tried to do it (around everything) but that's not working and I find this dirty in my architecture.

 

Do you have an example of this Timeline ?

 

I'm gonna do this too then, that's gonna be easier.

 

Yeah, I love dogs

[ScrollSmoother - Add effect in the middle of a page]

Hi,

 

I have done an immersive slide effect :

See the Pen rNdYxPY by simon-gioffredi (@simon-gioffredi) on CodePen

 

On my website this should be used in 2 templates.

 

The first one is an immersive template just like the first codepen and that's working like a charm because there is only this.

 

But the second template is an edito. So this animation can appear at the top, the bottom or the center of the page depend of what is choosed in our CMS.

 

And as you can see that's not working.

 

I understand why that doesn't work, but I don't know if there is a way to handle this ?

 

If I can't use ScollSmoother to achieve this should I try to rework this effect with a ScrollTrigger ?

 

Thx  

See the Pen OJvONKj by simon-gioffredi (@simon-gioffredi) on CodePen

[ScrollTrigger - Pin an element and animate him in the same time]

I managed to did it like that 

 

In my website, I also calculate when the content can show, with an onUpdate in the timeline.

 

I think that's not perfect, because that's not very accurate, but that's gonna be enough.

Thx  

[ScrollTrigger - Pin an element and animate him in the same time]

I was wondering if that was the best thing to do because that's need "a lot" of calcul.

 

I think that can work, i'm gonna try it, thank you  

[ScrollTrigger - Pin an element and animate him in the same time]

@mvaneijgen I think you didn't add the good Codepen link ?

[ScrollTrigger - Pin an element and animate him in the same time]

Hi Cassie

 

Yes, I know this parameter. Anyway, the timeline isn't the real problem (I think). That's juste an animation which put the img in full height and width.

if I use the timeline alone, the image goes full like I want.

 

My concern is more about ScrollTrigger here.

 

What I want, in order : 

• Start : Pin the image for all the rest of the scroll (I want the image to be in the background)
• Start : Animate the image (she starts little and the more we scroll, the more she grows)
• When the anim is over : I want to have some scroll (adding like a delay of 150px)
• After this "delay" : My content should go above the image 

 

I don't know if that's clear enough.

 

Thx  

[ScrollTrigger - Pin an element and animate him in the same time]

Hi,

 

I am trying to do an animation where a background image should pin (like forever), grow for some time and then the menu appear on it (and some other things possible).

 

When I use 1 ScrollTrigger to do it, I can't really manage the moment where the content should appear. 

 

If I use 2 Scrolltriggers (the first to pin, the second to animate the img), the second one wait for the first to finish.

 

Do you have any idea ?

 

I think I can handle this with a translateY on content and add the height of the content to the pin, but I'm not sure that's the good thing to do

 

Thx

 

See the Pen eYMWmow by simon-gioffredi (@simon-gioffredi) on CodePen

[Draggable - Dynamic width slides onThrowUpdate]

Hi,

First of all, sorry for my english, I'm not an english native speaker.

 

I try to do a complete Carousel with Draggable.

 

Actually, I use snaps with a basic function :

return Math.round(x / slideWidth) * slideWidth

 

Doing this forces me to use only slides with same width.

 

I try to change that, with slide which size changes when they are "active"

 

But I struggle a lot. Do I need to use liveSnap ?

 

If you have an idea, that could be great  

See the Pen JjpNaVa by simon-gioffredi (@simon-gioffredi) on CodePen

[ScrollTrigger & Nuxt - Error on when component update]

Oh yes.

I already transpile gsap, but yeah, I can do that import.

Thx

[ScrollTrigger & Nuxt - Error on when component update]

Ok, I get it.

The problem occurs when I use ScrollTrigger in the main component element.

 

I needed to had a container as a trigger.

[ScrollTrigger & Nuxt - Error on when component update]

Hi,

 

Yeah, that's the problem, but in hr, my component element is already set. I don't understand what ScrollTrigger doesn't like here.

If I console.log my element, everything is fine, but ScrollTrigger doesn't recognize him.

[ScrollTrigger & Nuxt - Error on when component update]

Hi Cassie,

 

In the Nuxt lyfecicle, when you change something in your component, only the component "update".

When you arrive on the project, everything works fine, but when you update your component (for example, change the console.log), the component should update, and here, there is an error.

 

[ScrollTrigger & Nuxt - Error on when component update]

Hi,

 

First of all, sorry for my english, I'm not an english native speaker.

 

I have an issue when I use ScrollTrigger and Nuxt.

https://codesandbox.io/s/scrolltrigger-nuxt-update-component-wlo2y

 

You can see the demo here.

When we reload, or come for the first time in the page, there is no problem.

But if you make Nuxt reload the component, you can see an error appear.

If you change the console.log, you can see the WebApp updates, and there is a bug who appear.
 

Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

 

The bug only appear when you pin the element.

 

I understand the problem, that's the trigger we pass to ScrollTrigger which isn't good, but I don't understand why.

 

Does anyone has an idea ?

 

Thx
 

[ScrollTrigger issues in Nuxt components when navigating pages]

Hi,

 

When I developped something like that I had some issues too.

 

On nuxt every time you destroy your component, you need to kill your timelines and your ScrollTrigger instances.

 

I didn't build my timeline like you. Maybe can you try like that ?

 

mounted () {
            this.animation = gsap.timeline({
                scrollTrigger: {
                    id: `featured-${this.blok._uid}`,
                    trigger: `#featured-${this.blok._uid}`,
                    markers: true,
                    start: 'top 75%',
                    end: 'bottom bottom',
                    pin: false,
                    scrub: 2,
                },
            })

            this.animation.from(
                this.$refs.heading,
                .8,
                {
                    autoAlpha: 0,
                    y: 100,
                }, '-=.6',
            )

            this.animation.from(
                this.$refs.title,
                .8,
                {
                    autoAlpha: 0,
                    y: 100,
                }, '-=.6',
            )

            this.animation.from(
                this.$refs.content,
                .8,
                {
                    autoAlpha: 0,
                    y: 100,
                }, '-=.6',
            )

            this.animation.from(
                this.$refs.buttons,
                .8,
                {
                    autoAlpha: 0,
                    y: 100,
                }, '-=.6',
            )

            this.animation.from(
                this.$refs.additional,
                .8,
                {
                    autoAlpha: 0,
                    y: 100,
                }, '-=.6',
            )
        },
        destroyed () {
			const scrollTriggersInstances = ScrollTrigger.getAll()
            scrollTriggersInstances.forEach(el => {
                if (el && el.kill) {
                    el.kill(false)
                }
            })
            this.animation.kill()
        },

 

[Draggable - Android issue with "position: fixed"]

Hi,

 

Yes, this version has no problem

 

That's perfect, thx

[Draggable - Android issue with "position: fixed"]

Haha, that's a meme, but yes, that's exactly how I was when i saw that bug