jeffdfarr

I'm looking for a developer to convert this slider 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

I'm looking for a developer to be able to convert this exact slider to React. – https://codepen.io/jeffdfarr/pen/qBOzVwb?editors=1010 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.

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

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

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

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); });

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

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(); }

Okay Zach, here is the codepen. https://codepen.io/jeffdfarr/pen/abdoyOr

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, } }); });

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, } }); });