I have a scrollmagic scene that slides horizontally, with expanding divs
The open div is 60% (using 60vw) and the closed div's are 20% (using 20vw)
Here is a js fiddle of what I have, you will see the end trigger is really jumpy, which translates to the tween animations when they are all filled in.
https://jsfiddle.net/webbersites/ng7bry2q/
For Each Item I have This code:
$('.portfolio-description').width($(window).width() / 4.5) });
// init controller
var controller = new ScrollMagic.Controller({vertical: false});
var screenheight = $(window).height() - ($(window).height() * .36);
var screenheight1 = $(window).height() - ($(window).height() * .36) + "px";
var screenhalfwidth = $(window).width() * .6;
var screentwinwidth = $(window).width() * .2 + "vw";
var screentwinwidthx = ($(window).width() * .2) * -1;
var tween1 = new TimelineMax();
tween1.set("#target1", {opacity: 1,ease: Linear.easeNone})
.to("#target1", 9, {width: "60vw",ease: Linear.easeNone}, 1)
.to("#target1 .portfolio-description ", 2, {opacity: 1,margin: "0 0 0 0"}, 8)
.from("#target1 .portfolio-description ", 1, {margin: "-2vw 0 0 0"}, 8)
.to("#target1 .portfolio-subtitle ", 1, {width: "50%"}, 0)
.to("#target1 .portfolio-date ", 3, {margin: "0"}, 0)
.to("#target1 .subsection2 ", 8, {rotation: 0.001,height: screenheight1,ease: Linear.easeNone}, 0)
.to("#target1 .subsection1 ", 8, {rotation: 0.001,bottom: screenheight1,delay: 0,ease: Linear.easeNone}, 0)
.to("#target1 .subsection1 ", .5, {bottom: screenheight1,delay: 0,ease: Linear.easeNone}, 9.5)
.to("#target1 .next-jump ", .1, {autoAlpha: 0, delay: 0}, 4)
.to("#target1 .portfolio-link ", .1, {autoAlpha: 1,display: 'block'}, 5)
I tried adding in rotation: 0.001 from another post, but did not help.
This is happening in all browsers that I have tested.
An example of what I am trying to do is found on this site:
This site is able to have the items moving in from the left stay at the same speed during the expanding.