Jump to content
Search Community

Bootstrap's carousel with scroll magic and TimelineMax

atif.kht 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 am trying to implement a carousel slider of bootstrap and want the caption to animate when the slider is active. It does animate for first slide but not for others. Below is my code:
 
// Slider 
var controllerSlider = new ScrollMagic.Controller({vertical: false});


jQuery('.carousel-inner .item').each( function() {


var tlSlider = new TimelineMax()
.from( jQuery(this).find('h1'), 3, { x: -50, autoAlpha: 0,})
.from( jQuery(this).find('h2'), 3, { y: -50, autoAlpha: 0,});


var scene = new ScrollMagic.Scene({triggerElement: jQuery(this) })
.setTween(tlSlider)
.addTo(controllerSlider);
});

 

Link to comment
Share on other sites

Hello atif.kht, and welcome to the GreenSock forum!

 

Thanks for the code snippet. To better help you can you make that into a codepen example. The reason i ask is that it looks like you are using ScrollMagic as a trigger and scrolling controller. ScrollMagic is made with GSAP but is not made by GSAP.

 

You can find out more about ScrollMagic on Jan Paepke's website.

 

https://github.com/janpaepke/ScrollMagic

 

And issues related to ScrollMagic:

 

https://github.com/janpaepke/ScrollMagic/issues

Here is a video tut on how to create a codepen example.



This way we can test your code live on codepen to better help you!

 

Also keep in mind from() tweens fire immediately  so this might help since your using from() tweens.

 

 

Also make sure you are using the latest version of GSAP which is at 1.9.0

Thanks!

Link to comment
Share on other sites

  • 1 year later...
  • 1 year later...
On 12/6/2017 at 3:38 PM, Claude Janz said:

 


 $('#carousel').on('slide.bs.carousel', function (event) {
  target = $(event.relatedTarget);
  var tlSlider = new TimelineMax()
  .from( target.find('h1'), 0.5, { scale: 600, autoAlpha: 0,})
  .from( target.find('h2'), 0.5, { y: 150, autoAlpha: 0,});
});

 

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

 

Thanks for this. It has been super helpful and works great.

 

As a next step though I am struggling to take it to the next level and implement  SplitText. Any advice? 

 

I know the SplitText I am trying to implement works great, as I use it in other areas of the page fired with scrollmagic:

 

$(".top-text2").each(function(i) {
      var splitone = new SplitText($split[i], {type: 'chars, words'});
      var tl = new TimelineMax();
      tl.staggerFrom(splitone.chars, 0.5, {y: 80, opacity: 0, ease: Power4.easeOut}, 0.01);

      new ScrollMagic.Scene({
          triggerElement: this,
        })
        .setTween(tl)
        .addTo(ctrl);

    });

Any advice much appreciated.

 

Cheers!

Link to comment
Share on other sites

Hello @trubsl and welcome to the forums! Thanks for being a Business Green member.

 

5 hours ago, trubsl said:

As a next step though I am struggling to take it to the next level and implement  SplitText. Any advice? 

Can you please include the part of your code related to the slide and SplitText? Or does the SplitText code that you shared not work?

 

It would be helpful if you provided a minimal demo of your issue in something like a CodePen. See the below post for more information.

 

 

Link to comment
Share on other sites

Hey! Thanks for your response - and for making such a great set of tools. Only too happy to support.

 

I've put this simple carousel on codepen together that includes some basic animation on the text. 

 

See the Pen MWgrPNV by trubsl (@trubsl) on CodePen

 

I want to take this a step further and introduce an animation that uses the SplitText utility. How would I go about incorporating something like the example you have here? I've been at it for hours, but the moment I try and bring in SplitText it just dies on me! 

 

See the Pen mvhak by GreenSock (@GreenSock) on CodePen

 

Hopefully that helps explain where I am better!

 

Cheers!

 

 

Link to comment
Share on other sites

Thanks for the demo! You can implement the SplitText effect above into the carousel like so:

 

See the Pen XWrVojm?editors=0010 by GreenSock (@GreenSock) on CodePen

 

The core of it is creating a timeline for each slide at the beginning and just playing that timeline when a new slide is viewed. I also added a line to prevent the first slide from being animated but you can remove that if you'd like.

 

Let me know if you have any questions about my approach.

 

Happy tweening.

 

P.S. You can use GSAP to do a carousel effect if you'd like: 

 

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