msnl

I'm aware that this is more of a js issue but just linking buttons and cards made me feel so proud that i'd like to finish the whole thing (before going mad trying to implement the backend, but that's another story). I can't find a way to start the timeline on the active card only, as it is the code iterates for all the blocks of text as all of my previous attemps have failed. I've tried nesting a second loop for all the cards to link the increments of i, then an if else to check if classList.contains etc, but it seems to be way out of my current abilities. Any hint is more than welcome. Thanks

Ok, i may have missed the focal point in my previous post, if you are a newbie like me and reading this i can only say 2 things: 1 Get some sleep when you need it 2 Read the documentation What i was trying to achieve was the effect shown in the second post while having each box appear at once ON MOBILE (forgot this in my previous post), and ScrollTrigger.matchMedia seems to be what i needed. Now i only have 2 thing i would like to solve. -On desktop, if i leave the section with the boxes and go back to it before the animation has finished i get some messy behaviours, mainly boxes still being visible. I try to set everything back to "default" with a 0 duration tween, no luck. -On mobile, i'm trying to have the boxes appear from the top instead when scrolling back up solved thanks to the example This is a more like it pen, i'm sure there's better way to do it but i prefer to get it working before cleaning it. https://codepen.io/msnl/pen/LYZpWNy

I'm trying to replicate this while making each "box" appear at once as it enters the viewport as in this example EDIT: I'm talking about view in mobile, with each box in a column. Now, i'm still a newbie and it's 5.29am here, but shouldn't setting the trigger to "box" and the forEach loop take care of this? This is what i got https://codepen.io/msnl/pen/ExyVKRd

Oh, so that's an expected behaviour, thanks.

While making that codepen i noticed that my issue is not present there and that made me realize that it may have to do, as usual, with the url bar, which is not hidden/shown but always present in full page view. The problem is that when the navbar appears and disappears it triggers "adjustments" after the scrolling is done while using gsap to change backgroundPositionY . It also seems to mess with the start and end points. I'm using Chrome on Android. Can anyone confirm?

Hi, first of all, i'm a very basic user, so i apologize for the silly question. That's also the reason my codepen is not working, somehow if i try to fire fullpage.js in plain javascript it doesn't work there, and i think that also messes up the other fading animations are not working as intended, but that's not relevant, i think it shows enough. Anyway, i've found on this forum a snippet for a slideshow and i'm trying to implement it with fullscreen.js. It was a tweenMax, if that matters. I'm trying to make the slideshow stop when changing section and either resume or restart when going back to it as i don't like the idea of a random animation timing when going back. The problem is that i'm not sure what's the best way to do it, if i try to use gsap 3 and turn the slideshow in a timeline it just fires as soon as the variable is declared and i can't seem to control it with fullpage onLeave, if i declare everything inside the onLeave bracket i can't seem to access it later. How do i proceed?