Adding tween with dynamic variables to Scrollmagic/GSAP timeline

Question

I am a Jquery novice, and would have thought the solution to my problem to be quite simple, however I have tried a million permutations of this code and I can't solve it.

I am using Scrollmagic and GSAP, and want to trigger three tweens from the same point, so that they fire one after the other (with a slight overlap). The scenes have duration: 0 so that the user only starts the animation, but does not control its progress. Each tween contains a css transform, to work on the same object (#boxes3d).

The effect I am going for is :
1) The boxes start flat, but are exploded into 3D by changing the css perspective value to 850px.
2) The boxes rotate 180 degrees by changing the css transform value.
3) The boxes are collapsed again by reverting to perspective: 50000.
[ 4) The animation reverses when the user scrolls back past the trigger.]

The complication is that the transform value must also incorporate a dynamic scale value in order to make the absolutely positioned divs inside #boxes3d fit the frame at any screen size. The scale value (and therefore the whole transform) is set dynamically by another Jquery function: scaleDiv() which contains the nested rotate3D() and reverse3D() functions.

I think I need to create a timelineMax (or Lite) to queue the tweens, but I am having problems putting dynamic css values into the timeline.

I have created a jsfiddle with the tweens/transitions that I want to string together, along with the scaleDiv function that must be incorporated into the second tween. At present they have separate scenes, but I want to put them all into one scene/timeline.

Here is the fiddle: http://jsfiddle.net/gbinning/vccxufou/13/. I would really really appreciate some guidance! Thank you v much!

Edit: I haven't quite set up the scaleDiv function correctly, you need to slightly resize the window to trigger it.

Answer 1

So you want it to rotate, transform and scale, dynamically? I'm doing the same thing in my project.. here's how I do it. Maybe it will help you.

http://jsfiddle.net/xko7gjty/1/

$("#abox").addClass("rotate");

var dynamicx = Math.random()*300;
var dynamicy = Math.random()*300;
var dynamicscale = Math.random();
var tween = new TweenMax("#abox", 1, {
            top: dynamicx+"px",
            left:dynamicy+"px",
            scale:dynamicscale,
            //ease: Linear.easeNone,
            delay:.2
        }); 

FYI, you have to create a new tween every time. The way gsap works is, when you create a tween, it uses the CSS values at that moment. If you changed your css, the original tween will only do the original location

Answer 2

*If you don't want my story go to the bottom marked with Bold for a short answer. The person who posted this question might have long forgotten about this question, but for anyone to come here, this is my solution. I will be using gsap3 in my answer as that is the current. I was working on a scroll-based animation when I came across this problem. What I wanted to do in my animations as you might see in the code is have an entry animation on a div based on a scroll. The problem is the following CSS

transform: translate(314.18px, 244.9px) rotate(295deg) 

should have different x and y coordinates depending on the screen size. So for example, if the user started on a full screen and then resized the window that would distort the animation, so I would like to update the coordinates on window resize. To solve the problem, I set the x and y coordinates to be returned values of different functions width() and height() hoping the gsap.to function will store the function as its value in the key-value pair but as mentioned in the above answer not only does it store variable values once but it turns out it also stores the returned value of functions rather than the functions themselves, so I tried something else. That is to put all the animation in one function and call it every time the window is resized. The before and after code looked like the following.

Before the solution

var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
function updateDimention() {
    vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
    vh = Math.max(document.documentElement.clienthHeight || 0, window.innerHeight || 0)
}
window.onresize=updateDimention;
let height = function(){return vh};
let width = function(){return vw};

gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
const entryAnim = gsap.timeline(
        {
            scrollTrigger:{
                scrub:true,
                pin:true,
                trigger:".main",
                start:"top top",
                end:"+=6000px",
            },
            // yoyo:true,
        }
        );
        entryAnim.pause()
        entryAnim.to(
            ".pic1",{
            motionPath:{
                path:[{x:0,y:0,},{x:0.155*width(),y:0.2*height()},{x:0.18*width(),y:0.25*height()},{x:0.23*width(),y:0.395*height()}],
                // type:"cubic",
                autorotate:true,
            }, 
            
        }).to(
            ".pic2",{
            motionPath:{
                path:[{x:0.18*width(),y:0,},{x:0.15*width(),y:0.21*height()},{x:0*width(),y:0.40*height()},{x:-0.000503*width(),y:0.75*height()}],
                // type:"cubic",
                autorotate:true,
            }, 
        
        }).to(
            ".pic3",{
            motionPath:{
                path:[{x:-0.15*width(),y:-0.10,},{x:-0.10*width(),y:-0.5*height()},{x:0*width(),y:0*height()},{x:0.4245*width(),y:0.324*height()}],
                // type:"cubic",
                autorotate:false,
            }, 
        
        })
        
        
        const rotationAnim = gsap.timeline(
        {
            scrollTrigger:{
                trigger:".main",
                start:"top top",
                end:"+=6000px",
                pin:true,
                scrub:true
            },
            // yoyo:true,
        }
        );
        rotationAnim.pause()
        rotationAnim.to(".pic1",{
            rotation:295,
        }).to(
            ".pic2",{
                rotation:329,
            }
        ).to(".pic3",{
            rotation:48,
        })

After the solution

var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
function updateDimention() {
    vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
    vh = Math.max(document.documentElement.clienthHeight || 0, window.innerHeight || 0)
}
let height = function(){return vh};
let width = function(){return vw};

gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
function Animation(){
    const entryAnim = gsap.timeline(
        {
            scrollTrigger:{
                scrub:true,
                pin:true,
                trigger:".main",
                start:"top top",
                end:"+=6000px",
            },
            // yoyo:true,
        }
        );
        entryAnim.pause()
        entryAnim.to(
            ".pic1",{
            motionPath:{
                path:[{x:0,y:0,},{x:0.155*width(),y:0.2*height()},{x:0.18*width(),y:0.25*height()},{x:0.23*width(),y:0.395*height()}],
                // type:"cubic",
                autorotate:true,
            }, 
            
        }).to(
            ".pic2",{
            motionPath:{
                path:[{x:0.18*width(),y:0,},{x:0.15*width(),y:0.21*height()},{x:0*width(),y:0.40*height()},{x:-0.000503*width(),y:0.75*height()}],
                // type:"cubic",
                autorotate:true,
            }, 
        
        }).to(
            ".pic3",{
            motionPath:{
                path:[{x:-0.15*width(),y:-0.10,},{x:-0.10*width(),y:-0.5*height()},{x:0*width(),y:0*height()},{x:0.4245*width(),y:0.324*height()}],
                // type:"cubic",
                autorotate:false,
            }, 
        
        })
        
        
        const rotationAnim = gsap.timeline(
        {
            scrollTrigger:{
                trigger:".main",
                start:"top top",
                end:"+=6000px",
                pin:true,
                scrub:true
            },
            // yoyo:true,
        }
        );
        rotationAnim.pause()
        rotationAnim.to(".pic1",{
            rotation:295,
        }).to(
            ".pic2",{
                rotation:329,
            }
        ).to(".pic3",{
            rotation:48,
        })
}

Animation()
function updateAnimation (){
    updateDimention();
    Animation();

}

window.onresize=updateAnimation;

In short

so as a conclusion what you want to do is the following,

function Animation(){
        //in here put all your gsap related animations
    }
    //then down here call the Animation function every time values are changed so that
    //the gap animation can be redefined. In this case I am going to do it in window resize.
    window.onresize = Animation;