Jump to content
amigoface

Simple Text slider

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

Share this post


Link to post
Share on other sites

Excellent !

 

thanks Diaco !  really apreciate  :D

Share this post


Link to post
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

Share this post


Link to post
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')
};

Share this post


Link to post
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 ?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.