luckie12

maybe uhm, next time start your own post and dont hijack this one? Thanks!

Hey thats amazing! I was close with the ''calculation'' but this is even nicer! Thanks!!! Is it also possible that it does not hug my scrollwheel, but just according to the start and end that i had it scrolls between there? So without the alot of scrolling and standing still, but the same movement as my example codepen has, but then keep the start and end on the same spot ? Gonna save your example though, love it

Hi! I am trying to make a scrolltrigger/slider img carousel. I just cant pinpoint on how to set the correct translateX as soon as i scroll. When i get to the END marker, i need the images to be scrolled all the way to the left, but keep the images in the viewport and keep the very last image on the right hand side I hope that someone can help me with this 'calculation'! Thanks!

Hey! Thanks, thats a great resource to look at! i am looking a little bit on how to tell the 'texts' when to pop in etc as i said, i have a config file, which sections that looks like this: [ 'title' => 'High Performance <br> battery systems', 'titleSize' => 1, 'desc' => '', 'column' => 'col 3 / span 8', 'align' => 'center', 'seconds' => 8.5, 'scrollByPixel' => true, ], [ 'title' => 'Flexible design', 'desc' => 'A specialized in-house scalable system designed to seamlessly align with an application\'s specifications', 'column' => 'col 10 / span 3', 'seconds' => 21.3, ], [ 'title' => 'Ideal for any orientation', 'desc' => 'As a quick win we can add some text here instead of the sliders.', 'column' => 'col 10 / span 3', 'seconds' => 5.6, 'scrollByPixel' => true, ], theres many more in there but the most important line is 'seconds'. These describe how long each section of a video is. The first title should show at the first 8.5 seconds. The second title should show after 8.5 seconds for a period of 21.3 seconds (as thats a second section of the video). I am still trying to get this part added to the timeline, because i think that is the solution. But being pretty new to GSAP is not making it any easier Thanks!

Hello! Is it possible to control a MP4 video using the timeline from GSAP? I need specific things to happen on specific set times (seconds) in the video. Like text flying in, text appearing from the bottom etc etc At the moment im doing this with a mix of JavaScript and HTML5, setting the video.currentTime and using the scrollTrigger from gsap. This is a part of what i have; gsap.utils.toArray(".o-parallax__slide").forEach(section => { gsap.from(section, { scrollTrigger: { trigger: section, start: "top 50%", end: "bottom bottom-=50%", onEnter: ({progress, direction, isActive}) => enter(progress, direction, isActive, section), onEnterBack: ({progress, direction, isActive}) => enterBack(progress, direction, isActive, section), onLeave: ({progress, direction, isActive}) => leave(progress, direction, isActive, section), onLeaveBack: ({progress, direction, isActive}) => leaveBack(progress, direction, isActive, section), markers: {startColor: "yellow", endColor: "lightskyblue", fontSize: "24px", fontWeight: "bold", indent: 16}, }, }); }); gsap.utils.toArray("[data-has-fixed-title='1'] .o-parallax__content").forEach(title => { gsap.fromTo(title, {opacity: 0}, {opacity: 1, ease: 'none', duration: 0.5, scrollTrigger: { trigger: title, start: "top 50%", end: "bottom bottom-=50%", // start: "top bottom-=15%", // end: "bottom top+=15%", markers: {startColor: "red", endColor: "red", fontSize: "24px", fontWeight: "bold", indent: 100}, toggleActions: "play reverse play reverse", }, }); }) The top code goes over 18 sections (i defined 18 sections in a config file that puts out 18 sections with a class of parallax__slide) it adds a trigger on all sections, on specific times (the times are given to datasets on the parallax slides) the second piece of code is animating the title if the title has a dataset called has-fixed-title (this then proceeds to fade in the title). I havent seen yet how i can do stuff on specific set times using gsap timeline. I hope someone can help me with this, sorry if its unclear its a very specific topic ? Kind regards, Luc