Jump to content

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

GSAP Slider, carousel with text animation

Recommended Posts

I'm trying to achieve a smooth transition when the images changes, a blue background should  "function as a mask with the images".

1 - text appears,
2- first image appears, 

3- blue background ('#foreground') smoothly comes down and up 
4- second image appears.

I have an example , https://ueno.co/ 

So to recap, the image before changing a foreground should come down and then up again. 
I hope someone could help me as I'm stuck.

See the Pen vrRweK?editors=1010 by davide77 (@davide77) on CodePen

Link to comment
Share on other sites

you dont animate image or it's container in that demo, so the question is unclear, imo.

  • Like 1
Link to comment
Share on other sites

It would really help if you could simplify the demo.

After reading your description I don't know how this code relates to what you describe in the 4 steps.


TweenMax.set("#foreground", {alpha:1}, 0);
TweenMax.from(".path", 1, {x:50,scale:1.2}, 0);
TweenMax.from(".small-path", 1, {scale:2.4,x:150}, 0);
// Staggered menu items 
TweenMax.set(('.icon-line'), {autoAlpha:0,width: "0%", ease: Sine.easeInOut},'.1');
TweenMax.to('.icon-line', 2, {autoAlpha:1,width: "35%", ease: Sine.easeInOut },'.2') ;

TweenMax.staggerFrom(".fadeText",1,{delay:2,opacity:0, x:-50},'.3');
TweenMax.to("#foreground", 1, {delay:4,y:'-150%',
//initiate Bootstrap
onComplete: function() {
        TweenMax.to(".fadeText", .15, {
                scale: 1,
                ease: Cubic.easeOut
    $('#carousellABM').on('slide.bs.carousel', function () {


What are .path .small-path,  .icon-line?


Your description of the problem asks how to animate text, an image, and a blue background, but I'm just seeing a lot that has nothing to do with those things.


What does this code do?




Please understand that it is very difficult AND time consuming to look at 70 lines of JS that we have never seen before, with few meaningful comments, and understand how it relates to 60 lines of HTML code that we have never seen before.


From the description you provided I would expect a demo with 4 images, 4 text elements, and a single "blue background" div, and perhaps 20 lines of JS at most.


If there is anyway you can simplify this so that we can focus on a singular issue (related to GSAP) in a simplified demo that doesn't include bootstrap, that would go along way towards us being able to provide effective support.


Unfortunately, we really have to focus on the GSAP API and not so much untangling large chunks of custom code in a project that isn't working.

  • Like 3
Link to comment
Share on other sites

20 hours ago, Carl said:

What does this code do?




If I'm understanding this it uses bootstraps Carousel; 'cycle' is  a carousel method that tells the show to run, and the blue slide down is animated by GSAP and needs to be run between carousel slides.


I've never used Carousel so this is just an educated guess but I believe one of the  major issues is that you are using  "cycle" on carousel which just tells it to run probably you should be using .carousel('pause') between slides, then gsap animation and .carousel('next') in your gsap callback functions. I don't have time to try and figure it all out right now but I'll give you a theoretical set of events that might help you figure it out.


1- text appears,
2- first image appears,

3. .carousel('pause') Stops the carousel from cycling through items.

4. gsap animation blue box animated onto screen - onComplete .carousel('next') Cycles to the next item. 

5.- gsap  animation blue box animated off of screen

6. back to 1


Carousel also provides a couple of callbacks and events that might allow you to insert gsap into the Carousel process instead of the other way around as you are doing it now. My feeling is this might be a better way of handling it. Refer to the documentation.













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