Jump to content
DD77

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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


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

Share this post


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

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.