IndM

It seems that the width of the pinned-item is wrong due the margin being placed on it. While the pinned-spacer is showing this correctly. The pinning happens on the text. Can't figure out why its not working correctly

It looks like the timeline is getting stacked when scrolling fast up down, up down (not the konami code) so it leaves and enter the trigger. I've tried using: tl.pause() inside the onEnter, etc.. but this won't execute anything and pauses it without doing something else tl.kill(), this won't even start it ?

Hi @Wolfcoding! It seems a conflict with the css class container, that have a max width. My guess is that the code doesn't know the actually width of the content due the max width of the container. I didn't found a quick fix to make the pinning on the 'content' class work but if you just use pin: true instead, gsap would calculate the width of the content and place it inline on that container class. This way the next trigger after the horizontal scroll is calculated percect! Hopes this helps

Hey! This won't work in my case, the triggers needs to be triggered when the text is hit. I use a wysiwyg so there could be different animations for each text in it.

I thought this would be something simple that I could make, but instant running into a issue ? Not clearly know what I'm doing wrong here, what I want is the initial position y to be set at 150, so it would slide up onEnter. When I do this, the original triggers are being placed at the set position. So in my case (not the demo) it would be a lot off due the end trigger is being triggerd a lot later than the end of the text.

Damn thanks @mvaneijgen, this would be something I would've search days for while the solution was to just add % to the value ?, classic JS but logic when you know the issue haha

It seems that the text that is animated with clipPath, is not being animated correct. The text just appears (and pops) instead of showing bit by bit what a mask would do. Is this a browser issue?

Hello there, I've created an image to show what I mean so you can visualize it better , the inline gallery (in the screen the section with a bunch of images) is indeed a sort of section with a bigger with than the screen. Hope this is more clearer

Hi @Rodrigo Creating a horizontal scroller works for me, but what i can't figure out is to use a horizontal scroll with a lot of images in one 1 section for example. (Without displaying in a grid of 3 or something) But inline. So you would have a section with text, section with those images (inline), section with text again. I hope this clears out my intention!

What am I doing wrong here? I want to create a fake horizontal scroll with a gallery inside it. But the gallery comes over the first sections ?

I don't get why the drawSVG is not working here? I'm trying to get that green line to start from nothing. I've been comparing to other demo's and based on this one: demo

Hi @Rodrigo, @Cassie! I've reworked it based on your tips! Is it possible that you guys can give me some tips, or what I should have done better? Thanks in advance ? https://codepen.io/indy-meermans/pen/bGQYKbW

@mvaneijgen Thanks!! That's exactly the thinking method I needed! This will help me on the right path. @Cassie Whoops, I'm sorry ?. It sounded clear in my head, but I can understand that it was not that clear for someone else. I thought that the timeline wouldn't be accessible anymore and that I had to create another trigger or something else to update that containerAnimation value. But I can perhaps export that function and import it where I need it, and follow the way of mvaneijgen. This is the way ?

I've updated the code and minified the content. The titles that should be animated are: "This title should also be animated!". What I try to achieve is to have a global code to execute text animations, in this example is that the code for 'letter-slide-left', to also work in horizontal scroll code and when just scrolling the page. Without actually creating a new custom code for 'letter-slide-left' that only works in the horizontal scroll code for example. (Some useful information) That code is placed in a file named: text-animations.js The horizontal scroll is placed in a file: horizontal-scroll.js https://codepen.io/indy-meermans/pen/jOQGBKY?editors=1010

I cannot find the solution ? Perhaps I should restart and find an other solution, to achieve this kind of animation.

What is the best way to trigger an other animation on the pinned item (in this case the image) depending on what section is in view? I've tried with creating seperate scrollTriggers for it but I can't figure out why this won't work.

Hi y'all! I've tried to put it into a codepen so you would have a better vision what i mean. @Cassie So what you done is actually creating a scrolltrigger on top of an other scrolltrigger just to update it right? https://codepen.io/indy-meermans/pen/jOQGBKY?editors=1010

I don't really have a codepen for it because it's a thought process. What I have is a horizontal scroll timeline. In an other file I have some text animations. Now here comes the question; How do I update those text animations scrollTrigger with containerAnimation:horizontalTimeLineFromOtherFile only to the textelements inside that horizontal timeline? The same text animations are being used to elements on the same page but not inside that horizontal timeline for example.

Thank you Jack @GreenSock!! That seems to do the job. I'm not having it in your codepen or else but in my project the pinned container height isn't correct. The height is indeed the total of all the sections inside that wrapper but it doesn't add the extra +=600% from that video trigger on that pinned wrapper. It does add it to that video. Any clue what this could be? EDIT: I had to add pinSpacing: true,

@mvaneijgen That might be the solution for using one section with such a video but what if there is for example section; video-section; section; video-section (There can be more sections like that)? I've just tried in your codepen with duplicating that section and pasted it under the red one and it broke everything ??

I'm clueless again how to fix this; What I want to achieve is when the scrolltrigger starts, the section needs to stay on the same position (without the extra white spaces) and the content above and under still visible. So its a sort of screenfreeze while the video is playing. The video will play depending how much height it has. That's been fixed but here comes the challenging part for me. The content above and under it needs to be still in frame. I've tried with given the section an overflow hidden but won't work. Pinning the content above and under that section is also not an option.

Thanks!! @mvaneijgen I will keep that in mind for the video. Is it also a possible to check when the full content is loaded of the page, to call the scrolltrigger.update()? Or is this a sloppy way to fix it. The scrollTrigger solution is much easier then calculating the difference! I didn't know you could set the end of the trigger based on an other div.

I have this demo where in one column there is a scrubbing video and on the other some large text. I'm struggling to set the end position of the video animation perfect to the height of the column. So the behavior would act as a sticky element. Right now I calculate the height of the column minus the video height.

It allllll makes sense! Thank you @Cassie

The text needs to get a class when the image is in the scrolltrigger. But the OnLeave makes the class remove even when still entered and not left. The OnLeave needs to stay because I'm going to add the onEnterback for when I scroll back again. What am I doing wrong here?