Jump to content
GreenSock

david1977

Using tanslateX has trouble

Go to solution Solved by Jonathan,

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

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

  • Like 1
Link to comment
Share on other sites

  • Solution

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

  • Like 5
Link to comment
Share on other sites

thanks Jonathan !

 

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

  • 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.
×