Jump to content
GreenSock

davegrant

Members
  • Posts

    3
  • Joined

  • Last visited

Posts posted by davegrant

  1. I've been attempting to create what would first appear as a simple parallax-style scrolling page using TweenMax and scrollmagic, however making it work responsively has proved difficult.


    Essentially, what i'm after is for a page to load with a header image and a h1 title in a 70%/30% split, with the banner position fixed to the top of the page, resizing to 50% window height as the page scrolls and the h1, being pulled up above the header image and fading to 0 opacity. Once the header image hits 50% window height, it should unpin and the rest of the content should scroll up to a negative offset, just overlapping the header image, and then scroll as normal.


    Difficult to explain textually so the codepen referenced is annotated and should explain things better. I've tried everything I can think of here but after the first scene ends, the pin-spacer's min height adjusts itself for reasons i can't figure out and then won't return to it's previous value on reversing scroll. I suspect aligning the lower header with javascript isn't best but CSS didn't work much better either.


    Any and all ideas are really appreciated.


    Thanks


    See the Pen EVvwzm by digitalpencil (@digitalpencil) on CodePen

  2. That's perfect thanks!

     

    I'm actually doing the inverse and setting the oldrotation with the onUpdate function and the newRotation with on mousemove. The delay between the two though is sufficient to track whether it's pulling forwards or backwards which is perfect and more than sufficient for my purpose.

     

    Wasn't aware of this feature of tweenlite so can't thank you enough for the heads up :D

  3. Hi,

     

    I'm using Tweenlite and the following script to click and drag a wheel from its fixed center, causing it to spin in the direction the mouse is travelling.

     

    This works great however i now need to determine the direction in which the wheel is travelling i.e. clockwise/counter-clockwise.

     

    I've attempted to do this by various means including checking the start rotation on mouse down and checking if the new rotation on mousemove is greater or less than the start point however if the user drags from say 0 (mousedown start point) to 50 (mousemove rotation point) and then back again without releasing the mouse, the wheel has to get past 0 before registering as counter-clockwise.

     

    I figure then the best way to determine the direction is by calculating the angle with atan2 between two points and see if this decreases/increases but i'm having some trouble getting it to update (probably my sub-par code) and i'm not even sure if this is the right approach?

     

    What i have so far is below and the fla if it helps is at: http://s46264.gridserver.com/dev/dave/rotate/rotateDirection4.fla.zip

     

    Any ideas on how to determine the direction of spin here would be immensely appreciated. Math's not my strong point and i've been trying to figure this out for an age :oops:

     

    Thanks

     

    import com.greensock.*;
    import com.greensock.easing.*;
    import com.greensock.plugins.*;
    import flash.events.*;
    
    TweenPlugin.activate([shortRotationPlugin]);
    var oldRotation,ax,ay,bx,by,thetaA,thetaB,delTheta,newTheta:Number;
    
    var anchor1X:Number;
    var anchor1Y:Number;
    var anchor2X:Number;
    var anchor2Y:Number;
    
    function dragger(evt:MouseEvent)
    {
       if (evt.type == MouseEvent.MOUSE_DOWN)
       {
           stage.addEventListener(MouseEvent.MOUSE_MOVE, dragger);
           stage.addEventListener(MouseEvent.MOUSE_UP, dragger);
           oldRotation = vinyl_mc.rotation;
           ax = stage.mouseX - vinyl_mc.x;
           ay = stage.mouseY - vinyl_mc.y;
           thetaA = Math.atan2(ay,ax) * 180 / Math.PI;
           if (thetaA < 0)
           {
               thetaA =  -  thetaA;
           }
           else
           {
               thetaA = 360 - thetaA;
           }
    
       }
       else if (evt.type == MouseEvent.MOUSE_MOVE)
       {
    
           bx = stage.mouseX - vinyl_mc.x;
           by = stage.mouseY - vinyl_mc.y;
           thetaB = Math.atan2(by,bx) * 180 / Math.PI;
    
           if (thetaB < 0)
           {
               thetaB =  -  thetaB;
           }
           else
           {
               thetaB = 360 - thetaB;
           }
    
           delTheta = thetaB - thetaA;
           newTheta = oldRotation - delTheta;
    
           TweenLite.to(vinyl_mc, 1, {shortRotation:{rotation:newTheta}, overwrite:true, ease:Cubic.easeOut});
    
    	anchor1X = vinyl_mc.anchor1.x;
    	anchor1Y = vinyl_mc.anchor1.y;
    	anchor2X = vinyl_mc.anchor2.x;
    	anchor2Y = vinyl_mc.anchor2.y;
    
    	trace(getAngle(anchor1X, anchor1Y, anchor2X, anchor2Y));
    
       }
       else if (evt.type == MouseEvent.MOUSE_UP)
       {
           stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragger);
           stage.removeEventListener(MouseEvent.MOUSE_UP, dragger);
       }
    }
    
    function getAngle (x1:Number, y1:Number, x2:Number, y2:Number):Number
    {
    trace(x1, y1, x2, y2);
       var dx:Number = x2 - x1;
       var dy:Number = y2 - y1;
       return Math.atan2(dy,dx);
    }
    
    vinyl_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragger);

×