Search the Community
Showing results for tags 'top'.
Found 5 results
-
First of all sorry, but I can't provide a codepen, I will try to describe the problem the best I can. Basically I have this type of structure: <div class='middle'> <div class='canvas-holder'> <!-- [Three.js Canvas] --> </div> </div> This is the CSS each of this element have: .middle { position: relative; margin-top: 7rem; } .canvas-holder { position: absolute; height: 100%; // [Three.js Canvas] canvas { position: sticky; top: 0; } } The Three.js canvas has a certain size (window.innerWidth, window.innerHeight), with GSAP I wanted to animate the position of a model inside the Three.js canvas. I wanted to move up the model by 5 when I scroll, so I wrote this: // peeler_model is the model I want to move gsap.to(peeler_model.position, { y: 5, scrollTrigger: { target: middle_div, // I wanted to take the div as a reference point for the markers start: "top top", end: "bottom bottom", scrub: true, markers: true } }) Now with this what I thought would've happened is that by setting the target as the middle_div the first top at the start would have went at the top of the middle_div like this: But instead what happened was that START went at the top of the body. I don't know how to really fix it, I used percentages instead of top and bottom to fix it a bit, but it would be really helpful if top would go at the top of the target like it always did for me. The only thing I can think of of why this is happening is because the canvas has a parent with absolute positioning, but that's really strange. Anyways thanks in advance for the help.
-
Is it possibe to scale a div with TweenMax but I would like to maintain or reset the CSS top and left position? Below are a few failed attempts. It seems TweenMax always scales from the center point. TweenMax.fromTo('#div-name', 2, {scaleX:.5, scaleY:.5}, {css:{top:0, left:0}}); or TweenMax.to('#div-name', 2, {scaleX:.5, scaleY:.5}); $("#div-name").css({ top: '0px', left: '0px' }); The Codepen URL shows the red div scaling but not maintaining the top: 0 and left: 0 desired position.
-
Hi Greenies I have successfully designed my animations of lines of skills (except perfection in portrait) As the last effect I am loading a graphic of my business card ("#ezpc") and want it full screen The start position (except in 1920x1080) appears in the wrong position The destination Left & Top are also appearing in the wrong position When I debug the code the start and stop positions are correct but the graphic has it's own mind! I am sure that I am not "clearing" properly or perhaps I cannot use the same #demo container You may see my addGraphic() function attempting to kill the previous Tweens but that stops the first bit I know the majority of the code is quite unreadable due to it's complexity but can anyone give me any tips about resetting the page somehow prior to the loading of the graphic? The code is on CodePen as: http://cdpn.io/xHytr (full page) or http://codepen.io/thorntontf/pen/xHytr Thanks for any help you can give Trevor
-
So I have been searching for a way to have a background orbit a center. I came across the greensock blitmask that does an amazing job of wrapping the bitmap data to do infinte scrolling effects. However, I can't figure out a way to use this blitmask to rotate and still have the wrapping effect. I attached a SWF file to demostrate what i'm trying to accomplish. WASD keys control the movement cosc469.zip
-
Element rotation interferes with element position animation (element goes up instead of down)
Michael71 posted a topic in GSAP
Hello, I have the following code: $(document).live('keydown',function(event){ var key = event.keyCode; if(key==39){ TweenMax.to($("#hero"),0.1,{css:{'left':$("#hero").position().left+40}}); } else if(key==37){ TweenMax.to($("#hero"),0.1,{css:{'left':$("#hero").position().left-40}}); } else if(key==38){ TweenMax.to($("#hero"),0.3,{css:{'rotation':-30}}); TweenMax.to($("#hero"),0.1,{css:{'top':$("#hero").position().top-10}}); TweenMax.to($("#hero"),0.6,{css:{'rotation':0}}); } else if(key==40){ TweenMax.to($("#hero"),0.1,{css:{'top':$("#hero").position().top+10,'rotation':30},onComplete:function(){ TweenMax.to($("#hero"),0.1,{css:{'rotation':0}}); }}); } }); What this does is to read the "arrow" keys from the keyboard and move the element (hero) up/down/left/right However when pressing the down button continually, the element goes up instead of down, it does not do that when there is no rotation however. For some reason rotating the object gives it wrong .position().top value. It used to mess up moving upwards too, but I solved it by resetting the rotation to 0 after the animation (still its a workaround though). Anyone knows why is this happening? Or how it could be solved/worked around? You can view this here: http://www.netgfx.com/trunk/scrollingBG/ Thanks in advance.
