Using tanslateX has trouble

[david1977]

1. situation:  I make a slider has some futures ( prev / next / swipe touch ), and i use TweenLite and CSSPlugin to tranlate X for animation.

 

2. issue: After swipe ( could see scrollImages function ), click the test btn, it will expand article element width and clone the first nav element and append to the article element, but it causes html broken. Else if no swipe , it has no issue. This is the animated gif for showing this broken http://snchun.net/tools/record_2016_02_15_10_45_34_715.gif

 

3. codepen

 

I want understand what's wrong with it and solute it , tks everybody .

See the Pen adMOeB#0 by rfrkk (@rfrkk) on CodePen

[Jonathan]

Hello david1977, and Welconme to the GreenSock forum!

 

This seems more of question about the logic in your JS, than a GSAP question about translateX.

 

For example you are mixing 3 different things here in your scrollimages() function. Your mixing

• GSAP set() method
• jQuery css() method
• CSS transitions.

As a rule of thumb you shouldn't mix GSAP with CSS transitions. You are using jQuery css() method to apply the CSS transitions property. This will cause great conflict, since in one line you set a CSS transition with jQuery css() method and then right after that you are adding a set() of x in GSAP.

 

GSAP and CSS transitions in the browser will fight for control to animate your element. I would just use the GSAP set method to set your CSS properties.

 

You also dont need to use CSS transition on the same element your applying with GSAP.

 

When using GSAP you want to use its own methods. Otherwise by using jQuery css() method and other various jQuery methods like width(), you will be setting CSS properties outside of GSAP

 

So inside your scrollImages() function you need to remove the transition property and just use GSAP to animate, otherwise you will have the conflict you are seeing. Firefox wont even animate your elements due to this conflict.

 

Here are examples of using GSAP to scroll images:

 

Auto scroll images on drag using the GSAP Draggable plugin:

 

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

 

Auto scroll images on hover using the GSAP ScrollToPlugin:

 

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

 

Resources:

GSAP Draggable plugin: http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/

GSAP ScrollToPlugin: http://greensock.com/docs/#/HTML5/Plugins/ScrollToPlugin/

 

Hope this helps!

[david1977]

thanks Jonathan !

 

You give me a helpful idea, and it really resolve my issue.