[React + GSAP Draggable Slider]

I'm looking for a developer to convert

See the Pen qBOzVwb by jeffdfarr (@jeffdfarr) on CodePen

into React.

 

This was what I had started. It's still missing the infinite loop and auto play feature.

function MediaGrid ({title, text, media}) {
  
  // Create variables
  let slider = useRef(null);
	
  useEffect(() => {
    gsap.registerPlugin(Draggable, InertiaPlugin);


    // Make slider draggable
    Draggable.create(slider, {
      type: "x",
      inertia: true,
    }, []);

  });

  return (
  <section className="block media-grid" style={background}>
    <div className="slides-container" ref={el => slider = el}>
      {media && media.map((media, index) => (
        <div key={index} className="slideContainer">
          <div className="slide">
            {media.slide && media.slide.map((slide, index) => (
              <div key={index} className="img-wrap">
                <Img key={slide.id} fluid={slide.remoteFile.childImageSharp.fluid} />
              </div>
             ))}
          </div>
        </div>
      ))}
    </div>
  </section>
  )
}

export default MediaGrid

 

[REACT + GSAP Infinite Draggable Slider]

I'm looking for a developer to be able to convert this exact slider to React. – 

See the Pen qBOzVwb?editors=1010 by jeffdfarr (@jeffdfarr) on CodePen

 

Here's what I'm looking for it to do...

 

• Auto scroll
• Ability to be draggable
• Infinite loop

 

Ideally I'm looking to have this done in a 1-2 weeks.

 

 

 

[Split Text using custom font]

Oh I didn't realize there was kerning on the font. That seemed to fix the problem. Thank you!

[Split Text using custom font]

That seems like a bandaid to fix the problem. It does similar behavior for other sections of my website as well. 

[Split Text using custom font]

Okay, I updated the width to what it's like on the live site. () You can now see the weird breaking. Also, I will fix those side note issues. Thank you!

[Split Text using custom font]

That seemed to help on the drastic breaks but there are still some small line breaks issues. Here is my code below. Again, I can provide the live URL if hidden.
 

// Hero animation
document.fonts.ready.then(function () {
  
var heroTimeline = gsap.timeline({
onComplete: () => {splitLines.revert()}
});

const splitLines = new SplitText('.block-animate', {type: "lines", linesClass: "line"});
$('.block-animate .line').wrap('<div class="line-wrapper">');

heroTimeline.from(splitLines.lines, 1.25, {y: '150%', ease: "Power3.Out", stagger: 0.15}, 0.25);

});

 

[Split Text using custom font]

I can provide the live URL where I'm seeing this behavior but I don't know where to mark the message private.

[Split Text using custom font]

I'm using Split Text but I get weird line breaks when animating. I believe it's due to not letting my custom font load first but I'm unsure how to solve this. I've gone through the forums but I haven't seen a clear answer. Here is the code I have...

 

// Hero animation
var heroTimeline = gsap.timeline({
paused:true,
onComplete: () => {splitLines.revert()}
});

const splitLines = new SplitText('.hero .block-animate', {type: "lines", linesClass: "line"});
$('.hero .block-animate .line').wrap('<div class="line-wrapper">');

heroTimeline.from(splitLines.lines, 1.25, {y: '150%', ease: "Power3.Out", stagger: 0.15}, 0.25);

window.onload = () => {
heroTimeline.play();
}

See the Pen BajBJEV by jeffdfarr (@jeffdfarr) on CodePen

[ScrollTrigger for repeating sections]

Okay Zach, here is the codepen.

 

See the Pen abdoyOr by jeffdfarr (@jeffdfarr) on CodePen

[ScrollTrigger for repeating sections]

This seems to get me closer but now the 1st media-with-text component fires when you pass the second instance

 

gsap.utils.toArray(".media-with-text").forEach((section, i) => {

 

var image = "media-with-text img";

 

gsap.from(image, {

duration: 1.5,

ease: "power3.out",

opacity:0,

scale:1.15,

scrollTrigger: {

trigger: section,

}

});

});

[ScrollTrigger for repeating sections]

I have a media-with-text component that can be created multiple times in a page. What would be the most efficient way to trigger an animation each time that component comes into view? The below code is failing.

 

$(".media-with-text").each(function() {

 

var media = $(this).find("img");

 

gsap.from(media, 1.5, {

ease: "power3.out",

opacity:0,

scale:1.15,

scrollTrigger: {

trigger: this,

}

});

 

});