Jump to content
Search Community

GSAP Slider, carousel with text animation

DD77 test
Moderator Tag

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

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

  • 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() {
    $('#carousellABM').carousel('cycle');
        TweenMax.to(".fadeText", .15, {
                scale: 1,
                ease: Cubic.easeOut
        })
    $('#carousellABM').on('slide.bs.carousel', function () {
        $(this).carousel('cycle');
        tl.play(); 
    })
    
       
}                                           
},'.4')

 

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?

 

$('#carousellABM').carousel('cycle')

 

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?

 


$('#carousellABM').carousel('cycle')

 

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.

 

https://getbootstrap.com/docs/4.0/components/carousel/

 

 

 

 

 

 

 

 

 

 

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

I want to use your carousal but I've got a problem with it. If you change the images with indicators below, the text that slide from the left, changes randomly.Mean I want to display text associated with slide 2 and vice versa.

Can you please fix this.

Link to comment
Share on other sites

Hey @omergr8 and welcome to the GreenSock forums!

 

I am not understanding what you are requesting. Can you please create a new thread, try to explain very clearly what the intended effect is and what is going wrong, and provide a minimal demo of the issue? The thread below can inform you how to create a demo like that:

 

Link to comment
Share on other sites

  • 11 months later...
On 6/23/2018 at 6:26 AM, Carl said:

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() {
    $('#carousellABM').carousel('cycle');
        TweenMax.to(".fadeText", .15, {
                scale: 1,
                ease: Cubic.easeOut
        })
    $('#carousellABM').on('slide.bs.carousel', function () {
        $(this).carousel('cycle');
        tl.play(); 
    })
    
       
}                                           
},'.4')

 

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?

 


$('#carousellABM').carousel('cycle')

 

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.

How can I create this slider in gsap 3 ? could you please show me sample?

 

Thank You

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