Jump to content
Search Community

Slider transitions with GSAP and Scrolling

CICStoke test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi I'm trying to replicated the transitions on this pages sections http://cuberto.com using TweenMax.

 

var slides=document.querySelectorAll('.slide');
var tl=new TimelineLite({paused:true});

for(var i=slides.length;i--;){

    var D=document.createElement('div');   

        D.className='Dot'; 

        D.id='Dot'+i;

    D.addEventListener('click',function(){ tl.seek(this.id).pause() });

    document.getElementById('Dots').appendChild(D);

    tl.add('Dot'+i)





    if(i>0){
        if(i!=slides.length-1)
        {
            tl.addPause()
        }

        tl  .set(slides[i-1].getElementsByClassName("sideDetails"), {width: "0"})
            .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {width:'50%'},{ width: "100%", ease: Power2.easeInOut})
            .to(slides[i].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60", ease: Power2.easeInOut},0)
            .set(slides[i],{ background: "none"})
            .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {x: "0%"},{ x: "100%", ease: Power2.easeInOut}, .3)
            .to('#Dot'+i,.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i)
        .set(slides[i],{zIndex:1-i})
            .set(slides[i-1],{zIndex:slides.length})
            .to(slides[i-1].getElementsByClassName("sideDetails"), .3,{width: "50%",ease: Power2.easeInOut}, .6)
            .fromTo(slides[i-1].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60" }, {opacity: "1", y:"0",ease: Power2.easeInOut},.6)
    };
};

full code at codepen can be found here

 

I'm basically trying to transition between a bunch of sliders with a swipe animation, I have alternated the element i would like to transition on each slide in black or pink so I can see the animation.

 

I can seem to isolate the animation to the current slide - in essence I want the left hand div to grow to 100%, then animate off the page to the right, then switch to the next slider and animate the left hand dive to a width of 50% from an initial state of 0. I believe that is what the Cuberto site is doing.

 

However I am getting in an awful mess with the scroll event firing an animation on all the slides.

 

I'm not particularly competent with vanilla javascript but would like to attempt this with or without jQuery.

 

I have tried pagepiling.js and fullpage.js but this doesn't achieve the effect I'm looking for.

 

I could really do with a a resolution I can go to my client with, or at least a direction I could go in.

 

Thanks

 

asked 4 mins ago
0392488a46179b59515db969b60c3b91?s=32&d=

See the Pen jLbOEg by dansbananaloafcake (@dansbananaloafcake) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

 

 

I looked over the demo for awhile and I'm not exactly sure what you need help with.

Do you need help with something related to the GSAP API or advice on how to code / structure your project to work with swipe gestures and scroll?

We really try to keep our support laser-focused on the GSAP API, if there is question you have about how GSAP works or how it can with your project, please clarify and we'll do our best to help. 

 

I haven't dug much into Cuberto, but I see they are using skrollr to some capacity (its being loaded). My guess is that they may be using it to fire functions at certain scroll intervals to trigger GSAP animations, but I really don't know. Might be worth trying to see how its being used. 

https://github.com/Prinzhorn/skrollr

Link to comment
Share on other sites

Hi Carl,

 

I'm trying to replicated the swipe on page.

 

I would like to use dynamic selectors for this and I am adding a class as a reference to a state. However I believe that dynamic selectors aren't accepted in the time time. Could I create a function thats called with the timeline in and the selector will be dynamically updated inside the function each time it's call?

 

heres a bit of the code, I would love it if thisSlide and nextSlide variables would refresh once the they have changed in the timeline. Is there a way for call the timeline multiple times and passing the variable in on the call? Sorry I know I'm trying to be ambitious here.

 

var slides=document.querySelectorAll('.slide'); 
var tl=new TimelineLite({paused:true});	

for(var i=slides.length;i--;){
	
	var D=document.createElement('div');   
	    
	    D.className='Dot'; 
	
	    D.id='Dot'+i;
	
	D.addEventListener('click',function(){ tl.seek(this.id).pause() });
	
	document.getElementById('Dots').appendChild(D);
	
	tl.add('Dot'+i)
	
	
	
	
	
	if(i>0){
		if(i!=slides.length-1)
		{
			tl.addPause()
		}
		
		
		
		var thisSlide = ".currentSlide";
		var thisSlideIndex = $('.slide').index($(thisSlide));
		var nextSlideIndex = thisSlideIndex;  
		var nextSlide = ".slide:nth-child(" + nextSlideIndex + ")";
		var nextSlideText =  $(nextSlide + ' .sideDetails ul li:nth-child(2)').text();
		
		
		tl	.set(nextSlide + " .sideDetails", {width: "0"})
			.to(thisSlide + " .sideDetails", .3,{ width: "100%", ease: Power2.easeInOut})
			.to(thisSlide + " .detailsText", .3, {opacity: "0", y:"-=60", ease: Power2.easeInOut},0)
			.set(thisSlide,{ background: "none"})
			.fromTo(thisSlide + " .sideDetails", .3, {x: "0%"},{ x: "100%", ease: Power2.easeInOut}, .3)
			.set(nextSlide + " .sideDetails", {x:"0%"})
			.to('#Dot'+i,.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i)
			.set(thisSlide,{zIndex:1- i, className:'-=currentSlide'})
			.set(nextSlide,{zIndex:slides.length, className:'+=currentSlide'})
			.to(nextSlide + " .sideDetails", .3,{width: "50%",ease: Power2.easeInOut}, .6)
			.fromTo(nextSlide + " .detailsText", .3, {opacity: "0", y:"-=60" }, {opacity: "1", y:"0",ease: Power2.easeInOut},.6)
	};
};
		  
		  
		  
		  
		  
function GO(e){
  var SD=isNaN(e)?e.wheelDelta||-e.detail:e;
  if(SD<0){tl.play()}else{tl.reverse()};
};
 
document.addEventListener("mousewheel",GO);
document.addEventListener("DOMMouseScroll",GO);
document.getElementById('nextBtn').addEventListener("click",function(){GO(-1)});
document.getElementById('prevtBtn').addEventListener("click",function(){GO(1)});

 

Link to comment
Share on other sites

Hi CICStoke,

 

I´m not sure if I understand your problem correctly.

 

Some time ago I started a project based on a pen of Christo.


With the help of BLAKE, it has been extended:

Fullscreen slides with individual animations starting / reversing when slides are changing.

 

See the Pen vJNRPQ by mikeK (@mikeK) on CodePen

 

Hopefully this can be helpful ...

Mikel

 

 

  • Like 5
Link to comment
Share on other sites

  • 1 month later...

Hi @CICStoke

 

That's a pretty advanced site you are referencing. Do you have a demo of what you are working with? Perhaps a CodePen demo?

We really have to keep our focus in the support forums on the GSAP API. To recreate Cuberto effects with scroll and swipe-driven animations could take a few hours.

 

It would really help if you could take a stab at setting it up and let us know exactly which part you need help with that relates to GSAP.

 

Thanks

 

 

 

  • Like 1
Link to comment
Share on other sites

Hi Carl,

 

Yes I have just set one up:

 

See the Pen WZpzjM by dansbananaloaf (@dansbananaloaf) on CodePen

 

The pen shows that after the first scroll of the wheel it works as expected (and the reverse also works nicely)

However, after the first slide, if you try to advance it falls over. I'm looking for some reusable code that will work across all slides.

 

I hope I'm most of the way there. If you can help that would be a amazing.

 

Link to comment
Share on other sites

Hmm, I'm not really sure what's going on there. If you remove the pauses and the scroll controls will the timeline play through as you intend?

I'm just curious if the issues you have are solely related to scroll control or the actual way the timeline is built.

Link to comment
Share on other sites

  • 1 year later...
  • 3 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...