Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
amigoface

Simple Text slider

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

Hi,

i cannot figure out how to make this simple texts slider animation .

 

my goal is :

foreach text element, go from the left slowdow at center with velocity, then accelerate to the right .

 

when the text element  go to the right , i want also to hide the background container and show it again when next text come

 

 

any help is welcome

 

thanks and good day

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

Link to comment
Share on other sites

Excellent !

 

thanks Diaco !  really apreciate  :D

Link to comment
Share on other sites

Hi,

 

As you can see in Diaco's excellent example, this is done with the SlowMo ease. I'd also recommend you to keep the following link in your bookmarks, is an ease visualizer crafted by Jamie some time ago and is a really good help to get a "real life" idea of the easing functions packed with GSAP:

 

http://greensock.com/ease-visualizer

  • Like 3
Link to comment
Share on other sites

try this : 

var el = $(".el");
TweenMax.set(el,{autoAlpha:0,left:'0%',xPercent:"-50%"})
var tl = new TimelineMax({repeat:-1});

for(var i=0;i<el.length;i++){
  E = el[i];
  tl.to(E,0.5,{autoAlpha:1,left:'50%',ease:Power2.easeIn})
    .to(E,0.5,{left:'100%',autoAlpha:0,ease:Power2.easeOut},'+=2.5')
};
Link to comment
Share on other sites

almost done

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

 

it's more css trick rather than gsap

 

how to center text vertically for multiline elements please ?

Link to comment
Share on other sites

To center stuff with CSS, I like to use flexbox. But you can do the same with GSAP. Just get rid of your huge line height and add this.

TweenLite.set(element, { top: "50%", yPercent: -50 });

See the Pen NqxvYx by osublake (@osublake) 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.
×