Jump to content
Search Community

Jump at end when finishing slide

cemycc 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,

 

I have a slider of text but when the slider is at the end he creates a little jump over the text and then starts again as normal.

I have created the slide like this:

	animateSlider : () =>
		elWidth         = @textM.find('.js-marquee:first').width()
		marqueeWrapper 	= @textM.find('.js-marquee-wrapper')
		reverRepeat	= =>
			@timeLine.reverse(0)
		reverComplt  = =>
			@timeLine.restart()
		animObj			= {
			css:{"margin-left":"-"+elWidth+"px"}, 
			ease:Linear.easeNone,
			onReverseComplete:reverRepeat,
			onReverseCompleteParams:['{self}'],
			onComplete:reverComplt,
			onCompleteParams:['{self}']
		}
		marqueeWrapper.css('margin-left','0')
		TweenMax.killAll()
		if not @direction
			@timeLine = TweenMax.to('.js-marquee-wrapper', @speedSlide, animObj)
		else
			@timeLine = TweenMax.from('.js-marquee-wrapper', @speedSlide, animObj) 

elWidth is the width of the div that will slide. ( I have cloned this div into a wrapper to get the effect of circular ) .

The div js-marquee-wrapper contain 2 divs js-marquee that have been cloned.

I am using CoffeScript.

Link to comment
Share on other sites

Unfortunately I'm not a CoffeeScript guy - could you create a simple codepen that demonstrates the issue and use pure JavaScript? I didn't quite understand what the problem was that you were describing. Were you saying that it's currently jumping to a new value instead of smoothly transitioning there?

Link to comment
Share on other sites

The jump is occurring because your 2 .js-marquee elements are not identical widths.

 

Your content that is nicely indented and on multiple lines does not render the same as the single line clone. The spaces around the spans etc that indent the content still count as white space, so in the top one you have:

 

        <span class="news-title">Starwood Upgraded to Strong Buy</span>
····</a><span>  -  </span>
····<a href="etc

 

which in HTML becomes:

 

Starwood Upgraded to Strong Buy···-···Why You Should Ignore...

 

The nicely indented code actually has three spaces either side of the dash, while the clone only has 2.

 

I've fixed this in your codepen and you can see the difference

See the Pen cpItd by jamiejefferson (@jamiejefferson) on CodePen

.

  • Like 1
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...