[Bootstrap's carousel with scroll magic and TimelineMax]

Just wanted to say thanks for this response. Works perfectly!

 

Cheers!

[Bootstrap's carousel with scroll magic and TimelineMax]

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!

 

 

[Bootstrap's carousel with scroll magic and TimelineMax]

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!