Section slides and adding scenes #623

louiscox opened this Issue Nov 29, 2016 · 3 comments


None yet

2 participants

louiscox commented Nov 29, 2016 edited


In the examples there is a Section slides.

Is there a way to add more scenes to the horizontally scrolling slides? as the start point and end point exist between the first and last slide - how do I insert scenes to coincide with slides which are moving horizontally?

The examples makes reference to binding the animations to the scroll but it seems unclear as to if you can do this within the sections...

Many thanks

@louiscox louiscox changed the title from Slides and adding scenes to Section slides and adding scenes Nov 29, 2016

@louiscox Were you able to find something similar? I am also trying to add scenes to the section slides which move horizontally. Been searching all over the internet with different terms, unable to find any.

wppatrickk commented Dec 20, 2016 edited

@louiscox Hey I figured it out, all you have to do is add .to() to the wipeAnimation and then the animations will happen after they slide in.

Something like this.

var wipeAnimation = new TimelineMax()
		.to("#section-3 h2", 2, {top: "+=50%", ease: Linear.easeNone})
		.fromTo("#section-4", 2, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})
		.to("#section-4 h2", 2, {top: "+=50%", ease: Linear.easeNone})
		.fromTo("#section-5", 2, {x:  "100%"}, {x: "0%", ease: Linear.easeNone})
		.to("#section-5 h2", 2, {top: "+=50%", ease: Linear.easeNone})
		.fromTo("#section-6", 2, {y: "-100%"}, {y: "0%", ease: Linear.easeNone})
		.to("#section-6 h2", 2, {opacity: "1", ease: Cubic.easeOut})
		.to("#section-6 h2", 2, {transform: "scale(1)", ease: Cubic.easeOut});

I discovered a solution to this quite a while ago - its fairly straight forward,

There are two basics divs, one pinned to which you attach the controlling scene - and the duration sets the number of individual scenes you want, being multiples of 100, so in mine for example the duration is 700% for eight scenes.

Then you define all the scenes inside the controller, and that gives you the individual pages, all of which have a duration of 100%

You are free then to attach whatever Greensock movements or animations to the individual scenes as you like, they don't have to move left or right / up or down, they can actually move in a non uniform direction which I have seen on one site already...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment