Jump to content
Search Community

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

uani test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to comment
Share on other sites

Hello uani, and welcome to the GreenSock Forums. Merry Christmas!

 

If you can provide a simple

See the Pen by pen (@pen) on CodePen

or jsfiddle code example we can better help to see what is going on. Or if you can provide a limited example in files to upload.

 

This doesnt look like a GSAP issue! But by looking at your code and from what I see in your code, your using Superscrollrama. I havent used it that much, but someone here in the Forum might be able to help you better, or if you check out Superscrollrama support.

 

But it looks like maybe some pixel-snapping might be happening due to sub-pixels of the computed CSS left property, since your using percentages.

 

Maybe the issue is when animating the left property... the pixels are actual computed as sub-pixels when they are computed from 90%... which might be causing pixel snapping.

 

resource links on pixel-snapping and top / left vs x / y :

http://dcurt.is/pixel-fitting

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

 

you could try animating translateX ( x ) instead of left, and translateY ( y ) instead of top for smoother animations that support sub-pixels.

 

Again providing a code example so we can help you in a live editable environment will be greatly appreciated in helping to see what is going on in your code.

 

Thanks :)

Link to comment
Share on other sites

Hi,

 

In addition to Jonathan's answer you could try a from instance by setting your element's initial position to 90% and animate it from 600%

 

CSS

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

JS

//when you define the tweens
text2 :
{
  scenes:[
  {
    css : {left: "600%", ease: "Back.easeOut", easeParams: [0.7]},
    duration : .3,
    delay : 750,
    syncd: 800
  }]
  }

//finally in the loop
var t = TweenLite.from(getElem(a), s.duration, s.css);

Take a shoot at it and let us know how it goes.

 

Also as Jonathan said, is better to look at a live sample, so if you can provide it even better.

 

Merry Christmas,

Rodrigo.

Link to comment
Share on other sites

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 !)

Link to comment
Share on other sites

The syntax for translateX and translateY in GSAP is:

 

translateX = x

translateY = y

 

here is a great link from the CSSPLUGIN docs to look over:

 

http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

as far as not being able to use from() with multiple scenes.. 

  • What is your code  when using from() ?

to add your JS links on codepen.. click the gear icon.. and choose jQuery from the Library dropdown.. and your external links for GSAP

Link to comment
Share on other sites

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

Link to comment
Share on other sites

it doesn't look like a GSAP issue

ok so I created a codepen that has jquery, tweenlite, cssplugin, and superscrollrama loaded

go to this link on codepen and fork it..

See the Pen AlmhG by jonathan (@jonathan) on CodePen

-broken link

then you will be able to edit it and the repost the new forked link with your issue

dont forget to create account on codepen

:)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Hi,

 

I believe that the problem could be the #text2 element is inheriting it's position from it's parent, which tween happens before. Like I said one solution is use a from() instace, but that's not feasible. Another choice could be use clearProps on reverse complete, but since the tweens are created dynamically, this could be an issue at the end.

 

The solution I found is to add a set() instance at the beginning of the code, like this you set the element's inline style to 600% before the tween is created, then the engine records that position and the element goes back to it:

TweenLite.set($("#text2"), {left:'600%'});

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);
	}
}

Rodrigo.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Hi,

 

Unfortunately I don't have a good answer for you in that matter but I don't see any reason why that jump from 600% to 100% should happen.

 

Luckily, in terms of importance an inline style goes over a class and an ID, that's the reason why the set instance solves it.

 

A from instance is a very nifty tool in GSAP. In your sample you take the element from the position it has when the DOM is rendered, which is 600% and you animate it to 90%. So the element goes from it's original position to a destination position, from A to B. A from instance takes the element from the destination you pass to it, to the position it has when the DOM is rendered. For example if you set in your stylesheet the the element has a left value of 90%, when the page loads it'll be at 90% to the left and you create a from instance and pass a left:600% in the vars. The engine records the initial position of the element  and then it immediately applies an inline value of 600% to the left property, then it takes the element from that position to the position it had when the page rendered, which is 90%. It's kind of a backwards tween, it takes the element from the position you want, to the position it had when the tween was created, very useful for responsive design animations.

 

I hope that clear things up.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...
  • 4 weeks later...

Hi,

 

I've set up a codepen and can't seem to replicate the issue happening:

See the Pen evEiC by rhernando (@rhernando) on CodePen

 

Please, feel free to fork it and accommodate it to your scenario.

 

Also for the record, the issue in the previous version of the CSS Plugin was related to the specific percentage suffix and not with the element's property being animated.

 

Rodrigo.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...