HiLuLiT

@ZachSaucier This was a great read, I really learned a lot I managed to reduce the Tweens code but now i'm stuck when trying to loop.. I created this function called pageAnimation and I want it to be added to the timeline for as many pages as I have (since animations are repetitive for each page). I created a new demo here but there are errors ( so i'm not sure it will help), I marked out the repetitive code, that's actually what i'm trying to create inside the function The error i'm getting is: Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[object HTMLDivElement].titles' is not a valid selector. I'm also not sure this approach is the best direction regarding how to achieve this, but i'd love to hear your thoughts about that too... Thanks!

Hey guys! So I created this demo of a gallery with GSAP & ScrollTrigger - took we a while but I got there Now i'm trying to optimize my code, since I have a monstrous function for animating elements on the timeline, and I read that this is considered to be bad practice... so maybe someone here could guide me how to create an effective loop? I tried it myself but it really messed things up... I created a demo, would appreciate any help - really trying to get better at this https://codepen.io/HiLuLiT/pen/BazMOdL

Thanks for the help @ZachSaucier! I'll defiantly read some more about that and update my demo when done

I found a solution thanks for this thread and thanks to @akapowl : I updated my demo for the implementation I needed... Thank you too @Hugo Priet https://codepen.io/HiLuLiT/pen/BazMOdL My next question would be then - I want to fade in/out the titles on top of each slide- how can I achieve this?

i'm trying to create this demo inside a centered div https://codepen.io/GreenSock/pen/KKpLdWW I basically wrapped it with a wrapper overflow:hidden div and changed scrollTrigger's pinning to the center of the viewport, but then I completely lost the layered pinning effect... also - I only managed to center the div horizontally with margin: 0 auto, how can I center it vertically? flexbox doesn't seem to work. here's a demo - https://codepen.io/HiLuLiT/pen/BazMOdL

@mikel we're almost there.... defently looks better, I update the demo: https://codepen.io/HiLuLiT/pen/OJXajjx still problem remains - I want the SVG element to be 100% width of container (grid width) and 400px height... anything I try doesn't seem to work

@mikel - Sorry to bother you with this, as it turned out pretty nice, here's an updated demo - only problem is now I can't find a way to scale the svg.... any suggestions? https://codepen.io/HiLuLiT/pen/OJXajjx

@mikel Thank you, I tried implementing this but i'm having a problem with scaling SVG inside a container... any suggestions? it just doesn't seem to fit my image size

@mikel - I'm still getting used to Gsap & ScrollTrigger and it feels like i'm not on this level yet lol... are you familiar with a vertical demo of this effect? @akapowl - the demos could work, i will try them out... and if you can have a look when you have some time i'd love that Thank you both! I really appreciate it

the example from above: https://codepen.io/GreenSock/pen/KKpLdWW

Hey all, let's start from this demo that I have built - the effect i'm trying to achieve can be seen here: https://www.nightingale.world/about/ (reference just the scroll effect on the image while scrolling ) and also in this example: https://codepen.io/GreenSock/pen/KKpLdWW As you can see in my demo, I have a pinned <div> ('.slide' class) and for each pinned slide i'm applying timeline animations. i'm trying to add an animation on the images ('.img' class), but unfortunately this doesn't seem to work, the images just stack on top of each other... What am I doing wrong? I'm struggling...would love someone's help with this... Thanks

I appreciate your help, I will defiantly try this and show you final animations when done

nope EDIT - but if you scroll back up you would expect it to behave the same way, but reversed

You're right, but no - it's for a given amount of points (and always reachable in code through points.length).

Unfortunately I don't have a URL to share, that's the only reference I have.... And now when you mention it - you're right, I didn't notice I wasn't animating .point elements at all... I'll give it another try. As for "set timeline with labels in between each section and then use a single ScrollTrigger to go through it. " - do you have an example for that maybe? i'm sorry i'm a bit new to this library... even a reference to read would be good... Thanks again for all your help

Hey Zach and thanks for the quick replay... Currently the entire div (class="point") is fading on scroll while I'd like to achieve 2 animations on top of each other: 1. The background image should change with fade out/in (that is already happening) 2. The titles should have a scroll effect on top of the background image without fading, just change color of title according to the current point in viewport. I made a gif animation of what i'm trying to achieve:

Hey all, I'm trying to build an image gallery - I want to scroll fixed images and I want the related text to scroll with it to. I built this demo on codepen, I have 3 main elements: image, indiactor, and article. In the demo i'm able to change pictures, text and the Indicators change too (color change from grey to yellow). But how do I make the text scroll on top of the background image? everything fades together with the background and I wasn't able to solve this... Does anyone have any idea? Thanks for the help!