Jump to content
Search Community

uani

Members

  • Posts

    8

  • Joined

  • Last visited

 Content Type 

Posts posted by uani

    css left > 100% jumps to left = 100% and only then decreases

    in GSAP

    Posted

    Thank you! set() in fact cures the ailment.

     

    Despite an inheritance, wouldn't the explicit css "left" style set the position? And why does from() work in that it can get the "to"-position from css (and not an overriden parent position)? I let you/gs decide whether GSAP can do something about it.

     

    Thank you very much for your investment into my issue and finding a solution!

     

    Merry Christmas again

    css left > 100% jumps to left = 100% and only then decreases

    in GSAP

    Posted

    Hi!

     

    thank you!

     

    See the Pen IbcHy by anon (@anon) on CodePen

     

    I noticed you put "x" in place. GSAP takes the % as px though. If I change to px, the issue doesn't exist, so I put % in with "left".

     

    I added a #text3: it uses .from(). .from() works!

    .to() doesn't work.

     

    Note I adjusted the origin and dest values a bit, but the path isn't supposed to be the same!

     

    You'll see the issue when you *scroll down*. The top text suddenly appears at left: 100% and reverts back to there when scolling up. It should start at and revert to left: 600%. The issue is not dependant on the most-inner vs  one less-inner div.

     

    As .from() works, I guess it is in fact a GSAP issue.

    css left > 100% jumps to left = 100% and only then decreases

    in GSAP

    Posted

    The reason the transform isn't working is GSAP doesn't support percentage-values for translate and I need them.

     

    I have several positions (each belongs to a "scene") and I use .to() to go 0->1->2->3->4->... .

    I can't achieve this with .from() (after the first .from(), the position is at the initial specified (css) position, subsequent .from()s all animate to that position).

     

    Codepen only supports 1 external resource for non-pro members and I need at least 2.

     

    Thanks

    css left > 100% jumps to left = 100% and only then decreases

    in GSAP

    Posted

    Hi, thank you for the warm welcome!

     

    I penned the code over

    See the Pen nibAG by anon (@anon) on CodePen

    , yet I don't know how to add the neccessary libraries, thus the preview doesn't work (it needs jQuery 1.x, Superscrollorama and TweenLite with CSSPlugin).

     

    I read about pixel-fitting and didn't see how it could hamper setting the position. Perhaps it is a superscrollorama issue. If you don't conclude anything, I'll ask over there :-).

     

    .from() animates properly! However I can't use it with multiple scenes for one element, I need ".to()".

     

    I didn't get css "transform: translateX()" to animate: does TweenLite support it?

     

    Happy New Year :-)    (btw.: quick reply's JavaScript doesn't work in IE11 Win8.1 !)

    css left > 100% jumps to left = 100% and only then decreases

    in GSAP

    Posted

    Hello,

     

    GSAP is a wonderful achievement!

     

    In below given code, if you observe the css left property eg in IE11 dev Tools of #text2, you'll notice it jumps to 100% from 600% and only then decreases to 90%. I expected a smooth transition from 600% to 90%. Reversing (using superscrollorama), the 90% increase to 100% and remain there. It appears the initial offsetLeft is not recorded.

    <!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8" />
		<title>gsap_left_issue</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="jquery.superscrollorama.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenLite.min.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/plugins/CSSPlugin.min.js"></script>
		<style type="text/css">
			html, body
			{
				height: 100%;
                font-size: 1px;
			}
			
			body
			{
				margin: 0;
			}

            #timeline
            {
                position: absolute;
                top: 0;
                right: 0;
                height: 2500px;
                width: 100px;
            }
			
			#limiter
			{
				position: fixed;
				height: 100%;
				width: 100%;
				overflow: hidden;
			}
			
			#stage
			{
				position: relative;
				max-width: 1920px;
				height: 100%;
				margin: auto;
			}
			
			.vwrapper
			{
				position: absolute;
				top: 50%;
				left: 0;
                width: 100%;
			}
			
			#stage hr
			{
				position: relative;
				top: 50%;
			}
			
			#timeline hr
			{
				margin-top: 100px;
			}
			
			a
			{
				display: block;
				position: absolute;
			}

            .vegcontainer        /* for everything above screen min-width of 1024px */
            {
                width: 12.64%;
                float: left;
                position: relative;
            }
			
			@media screen and (min-width: 1681px)
			{
				#vegs
				{
					position: absolute;
					margin-top: -15.65%;
					left: 22.1%;
					width: 100%;
				}
			}
			
			.veg
			{
                width: 100%;            /* default width of img in container is not 100% ! (default margin is 0) */
                /*margin-left: 0;*/     /* > 0 lets (IE11) break line due to margin of img (!) not covered in expanding parent */
			}
			
			.vegcontainer
			{
				opacity: 0;
                position: relative;
			}

            .text
            {
                font: 16px "Arial Narrow";
                color: grey;
                position: absolute;
            }

            .text h1
            {
                font-size: 32px;
            }

            #text2
            {
                font-size: 16rem;
                width: 20%;
                top: 15%;
                left: 600%;
            }

            .text h2
            {
                font-size: 28rem;
            }
		</style>
	</head>
	<body>
        <div id="timeline"></div>
		<div id="limiter">
			<div id="stage">
				<div class="vwrapper">
					<div id="vegs">
                        <div id="veg1" class="vegcontainer">
						    <img class="veg" width="120" height="400" src="" alt="image" />
                            <div id="text2" class="text">
                                <h2>text</h2>
                                <p>text</p>
                            </div>
                        </div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var dests = {
			veg1 :	{
						scenes :	[
										{
											css : {opacity: 1},
											duration : .3,
											delay : 350,
											syncd: 0
										},
										{
											css : {left: "19%", ease: "Back.easeOut"},
											duration : .3,
											delay : 750,
											syncd: 600
										}
									]
					},
            text2 :	{
                            scenes :	[
                                            {
                                                css : {left: "90%", ease: "Back.easeOut", easeParams: [0.7]},
                                                duration : .3,
                                                delay : 750,
                                                syncd: 800
                                            }
                                        ]
                        }
		};
	
		var controller = $.superscrollorama({
			triggerAtCenter: true,
			playoutAnimations: true,
			reverse: true
		});
		
		function getElem(id)
		{
			var elem = document.getElementById(id);
			return elem;
		}

		for(var a in dests)
		{
			var b = dests[a].scenes;
			for(var e=0; e<b.length; e++)
			{
				var s = b[e];
				var t = TweenLite.to(getElem(a), s.duration, s.css);
				controller.addTween(s.delay, t, s.syncd);
			}
		}
	</script>
</html>

    Can this be fixed (or is the overflowing offsetLeft somehow not attainable) ?

     

    Merry Christmas!

×
×
  • Create New...