[Scrolltrigger with images as slider]

9 hours ago, Ponz said:

Hi!

I found this code and I immediately tried to use it in my project because it was exactly what I needed.. it wasn't easy to implement gsap in Elementor but it seems to me it works well enough except for a strange behavior at the end of the scroll.. could you help me to solve this?..

 

my site

 

my code is:

<script>
	;(function(){
			var chck_if_gsap_loaded = setInterval(function(){
			if(window.gsap && window.ScrollTrigger){
					gsap.registerPlugin( ScrollTrigger );
					myfunction();
					clearInterval(chck_if_gsap_loaded);
					}
			}, 500);
			
			function myfunction(){

				
let cont = document.querySelector("#container");
gsap.to(".slide", {
  ease: "none",
  x: () => -(cont.scrollWidth - window.innerWidth),
  scrollTrigger: {
    trigger: cont,
    pin: cont,
    start: "center center",
    end: () => "+=" + (cont.scrollWidth - window.innerWidth),
    scrub: true,
    invalidateOnRefresh: true,
    markers: true,
  }
});
				
			}
})();

</script>

 

 

3 hours ago, Ponz said:

Found the solution! ..it was an Elementor transition property.. 

Thanks for the code!

 

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

[Scrolltrigger with images as slider]

1 hour ago, Cassie said:

Heya!

 

Something like this should do you ☺️
 

 

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

[Scrolltrigger with images as slider]

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!

See the Pen VwERxZw by luckie12 (@luckie12) on CodePen

[Control MP4 video using timeline]

On 4/17/2023 at 5:13 PM, Rodrigo said:

Hi @luckie12 and welcome to the GreenSock forums!

 

This thread goes through synchronizing video and text animations using ScrollTrigger:

 

Hopefully is enough to get you started. If you have more questions remember to include a minimal demo please.

Happy Tweening!

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!

[Control MP4 video using timeline]

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