Duo

HI @mvaneijgen Thanks so much for your assistance. I really appreciate it. I updated my CodePen and I feel like I'm almost there but the only issue I'm having is that at the end of the animation, there is a slight pause before it runs again (image 1, image 2, image 3, pause, start animation again). I don't want that pause, I want it to just continuously loop. I set all the delays to 0 and also set the repeatDelay: 0 in the main animationTL but it's not working. Any help again would be very much appreciated. Thanks, Dayne

Hi @mvaneijgen I created a minimal CodePen demo here: https://codepen.io/dayneh88/pen/xxMqpdv Not sure if you could shed some light on the ease: "steps(1)" you mentioned and provide a quick demo based off my CodePen. Would greatly appreciate any help. Thanks, Dayne

Hi @Rodrigo I'm having no luck on this at all. I've created a minimal CodePen here: https://codepen.io/dayneh88/pen/xxMqpdv What I am trying to achieve is the following: Have an animation timeline that cycles through the images with a hard transition (no fade) Have the ability to pause the timeline when you "mouseenter" the images container Resume the animation when you "mouseleave" the images container Have this written in Vanilla JS (not jQuery) Any help would be greatly appreciated as I'm pulling my hair out trying to make such a simple thing work Thanks, Dayne

Hi, I am trying to create a simple image change timeline animation. I have 2 images of a bird flapping its wings. When I hover over it I want to set image 1 to visibility: hidden and set image 2 to visibility: visible and have that animation repeat. I'm also wanting to have the animation pause on the currently visible image when the user moves their mouse away. I don't want the change to fade, I want it to be a hard image change. Here is the code I was trying but I'm having no luck. I know there must be a better/easier way to do this. gsap.set(this.pigeonImg1, { autoAlpha: 0 }); gsap.set(this.pigeonImg2, { autoAlpha: 1 }); const pigeonTL = gsap.timeline({ paused: false, repeat: -1 }); pigeonTL.to(this.pigeonImg1, { autoAlpha: 0, duration: 0 }); pigeonTL.to(this.pigeonImg2, { autoAlpha: 1, duration: 0 }); pigeonTL.to(this.pigeonImg1, { autoAlpha: 0, duration: 0 }); pigeonTL.to(this.pigeonImg2, { autoAlpha: 1, duration: 0 }); Any help would be greatly appreciated. Thanks

You are a superstar @mvaneijgen Thank you so much for being super quick and helpful.

Hi @mvaneijgen Thanks for getting back me to so quickly. It's greatly appreciated. I've created a quick CodePen for you here: https://codepen.io/dayneh88/pen/mdaLGpZ

Hi, I have an element that rotates infinitely 360 degrees using GSAP. I've also implemented direction-based rotating on scroll using ScrollTrigger. It works great initially but once you begin to scroll either up or down and the scrolling stops, the element jumps to its original rotating position and begins rotating again which isn't ideal. This is the code that I'm using: gsap.to(this.rotatingText, {rotation: 360, duration: 40, repeat: -1}); var rotate = gsap.timeline({ scrollTrigger: { trigger: "html", scrub: 0.2, start: "top top", end: "+=10000" } }).to(this.rotatingText, { rotation: 360 * 5, duration: 1, ease: "none" }) Ideally, I would love it to, be that after scrolling, it gets the element's current rotated position and then begins rotating again from that point. You can view a video screenshot of the issue here: https://www.veed.io/view/6de5e2cc-072e-45d7-bb30-d015766ae546?sharingWidget=true&panel=share Any help would be greatly appreciated. Thanks

Hmm, that still didn't work @Rodrigo It's still throwing out the same error message.

Hi @Rodrigo Thanks for the tip regarding running the build before deploying. Excellent tip. I updated the code to this: import { useRef } from 'react'; import dynamic from "next/dynamic" import { montserrat } from '../utils/fonts' import { gsap } from "gsap" import { ScrollTrigger } from "gsap/dist/ScrollTrigger" import { ScrollSmoother } from "gsap/dist/ScrollSmoother" import useIsomorphicLayoutEffect from '../utils/isomorphicEffect'; import Head from 'next/head' import Image from 'next/image' import styles from '@/styles/home.module.scss' import profilePic from '@/images/dayne-profile-circle-new.png' import gradientPic from '@/images/gradient-bg.jpg' gsap.registerPlugin(ScrollTrigger, ScrollSmoother); export default function Home() { const smoother = useRef(); const ctx = useRef<gsap.Context>(null); useIsomorphicLayoutEffect(() => { ctx.current = gsap.context(() => { smoother.current = ScrollSmoother.create({ smooth: 2, effects: true, }); ScrollTrigger.create({ trigger: '#pinned-element', pin: true, start: 'top top', end: '+=5000', pinSpacing: false }); }); return () => ctx.current.revert(); }); return ( <> <Head> <title>Online portfolio of web developer, Dayne Coulson-Hoffacker</title> <meta name="description" content="Online portfolio of web developer Dayne Coulson-Hoffacker" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.png" type="image/png" sizes="any" /> </Head> <div id="smooth-wrapper" className={styles.scrollWrapper}> <div id='smooth-content'> <div className={styles.homeWrapper}> <div className={[`column`, styles["info"]].join(" ")} id="info-fixed"> <div className={styles["info"]} id="pinned-element"> <header> <div className={styles["profile-pic"]}> <Image src={profilePic} alt="Dayne Coulson-Hoffacker" /> </div> <h1 className={montserrat.className}>Dayne Coulson-Hoffacker</h1> </header> <footer> <p>A collection of agency and private projects.</p> &mdash; <p><span>Dayne Coulson-Hoffacker</span></p> &mdash; <p>Web developer with over 12 years experience crafting WordPress sites + Shopify stores</p> &mdash; <p> <a href="tel:3472765115">347 276 5115</a><br /> <a href="mailto:daynech88@gmail.com">daynech88@gmail.com</a> </p> &mdash; <p>Brooklyn, NY</p> &mdash; <p><span>Currently available for a full-time position or freelance projects in the US</span></p> </footer> </div> </div> <div className={[`column`, styles["projects"]].join(" ")}> <ul className={montserrat.className}> <li> <a href="https://www.fforme.com" target="_blank"> <span>FFORME</span><div className={styles.role}>— Front-end development<br />— Shopify development</div> </a> </li> <li> <a href="https://worldofreza.com/" target="_blank"> <span>Reza</span><div className={styles.role}>— Front-end development<br />— Shopify development</div> </a> </li> <li> <a href="https://www.theclasstwo.com/" target="_blank"> <span>The Class Two</span><div className={styles.role}>— UX/UI design<br />— Front-end development<br />— Wordpress development</div> </a> </li> <li> <a href="https://www.atmos.earth" target="_blank"> <span>Atmos</span><div className={styles.role}>— Front-end development<br />— Wordpress development</div> </a> </li> <li> <a href="https://www.eldetalle.co/" target="_blank"> <span>El Detalle</span><div className={styles.role}>— UX/UI design<br />— Front-end development<br />— Shopift development</div> </a> </li> <li> <a href="https://www.ewecare.com.au" target="_blank"> <span>Ewe Care</span><div className={styles.role}>— Front-end development<br />— Wordpress/WooCommerce development</div> </a> </li> <li> <a href="https://hartshorndistillery.com.au/" target="_blank"> <span>Hartshorn Distillery</span><div className={styles.role}>— Front-end development<br />— Wordpress/WooCommerce development</div> </a> </li> <li> <a href="https://grandvewe.com.au/" target="_blank"> <span>Grandvewe Cheese</span><div className={styles.role}>— Front-end development<br />— WordPress/WooCommerce development</div> </a> </li> <li> <a href="https://palmtreecrew.com/" target="_blank"> <span>Palm Tree Crew</span><div className={styles.role}>— Front-end development<br />— Shopify development</div> </a> </li> <li> <a href="https://soocd.com.au/" target="_blank"> <span>So OCD</span><div className={styles.role}>— UX/UI design<br />— Front-end development<br />— WordPress development</div> </a> </li> <li> <a href="https://theaftershock.org/" target="_blank"> <span>The Aftershock</span><div className={styles.role}>— UX/UI design<br />— Front-end development<br />— WordPress development</div> </a> </li> <li> <a href="https://bsidigital.com.au/" target="_blank"> <span>BSI</span><div className={styles.role}>— UX/UI design<br />— Front-end development<br />— WordPress development</div> </a> </li> <li> <a href="https://upstatestudios.com.au/" target="_blank"> <span>Upstate Studios</span><div className={styles.role}>— Front-end development<br />— Wordpress development</div> </a> </li> <li> <a href="https://thedermlab.com.au/" target="_blank"> <span>The Derm Lab</span><div className={styles.role}>— UX/UI design<br />— Front-end development<br />— WordPress development</div> </a> </li> <li> <a href="https://bamwine.com.au/" target="_blank"> <span>BAM Wine</span><div className={styles.role}>— UX/UI design<br />— Front-end development<br />— WordPress development</div> </a> </li> <li> <a href="https://terren.com.au/" target="_blank"> <span>Terren</span><div className={styles.role}>— UX/UI design<br />— Front-end development<br />— WordPress development</div> </a> </li> <li> <a href="https://studiolegal.com.au/" target="_blank"> <span>Studio Legal</span><div className={styles.role}>— Front-end development<br />— Wordpress development</div> </a> </li> <li> <a href="https://castleymccrimmon.co/" target="_blank"> <span>Castley McCrimmon</span><div className={styles.role}>— Front-end development<br />— Wordpress development</div> </a> </li> <li> <a href="https://leor.com.au/" target="_blank"> <span>Leor</span><div className={styles.role}>— Front-end development<br />— Wordpress development</div> </a> </li> <li> <a href="https://redhilltrailco.com.au/" target="_blank"> <span>Red Hill Trail Co</span><div className={styles.role}>— Front-end development<br />— Wordpress development</div> </a> </li> <li> <a href="https://makemodels.com.au/" target="_blank"> <span>Make Models</span><div className={styles.role}>— Front-end development<br />— Wordpress development</div> </a> </li> <li> <a href="https://sandkgroup.com.au/" target="_blank"> <span>S&K Group</span><div className={styles.role}>— Front-end development<br />— Wordpress development</div> </a> </li> </ul> </div> </div> </div> </div> <div className={styles.canvas} id="canvasContainer" data-grid="15" data-mouse="0.13" data-strength="0.15" > <Image src={gradientPic} alt="Dayne Coulson-Hoffacker" /> </div> </> ) } But now I'm getting this error message when I run the build again: Any help would be greatly appreciated. Thanks

Hi, Not sure if this is the right forum to ask this question but hoping that one of the many geniuses on here is able to provide assistance so here it goes. I am having an issue when trying to deploy my Next.js project to Vercel and it seems to be occurring in the build process and more specifically to due with gsap.context() This is my code inside my index.tsx page: import { useRef } from 'react'; import dynamic from "next/dynamic" import { montserrat } from '../utils/fonts' import { gsap } from "gsap" import { ScrollTrigger } from "gsap/dist/ScrollTrigger" import { ScrollSmoother } from "gsap/dist/ScrollSmoother" import useIsomorphicLayoutEffect from '../utils/isomorphicEffect'; import Head from 'next/head' import Image from 'next/image' import styles from '@/styles/home.module.scss' import profilePic from '@/images/dayne-profile-circle-new.png' import gradientPic from '@/images/gradient-bg.jpg' gsap.registerPlugin(ScrollTrigger, ScrollSmoother); export default function Home() { const smoother = useRef(); const ctx = useRef(); useIsomorphicLayoutEffect(() => { ctx.current = gsap.context(() => { smoother.current = ScrollSmoother.create({ smooth: 2, effects: true, }); ScrollTrigger.create({ trigger: '#pinned-element', pin: true, start: 'top top', end: '+=5000', pinSpacing: false }); }); return () => ctx.current.revert(); }); return ( <> <Head> <title>Online portfolio of web developer, Dayne Coulson-Hoffacker</title> <meta name="description" content="Online portfolio of web developer Dayne Coulson-Hoffacker" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.png" type="image/png" sizes="any" /> </Head> <div id="smooth-wrapper" className={styles.scrollWrapper}> <div id='smooth-content'> </div> </div> </> ) } This code works perfectly on my local server (https://localhost:3000) The issue is when I push changes to my repo and Vercel runs a build from those changes. I have attached the error message that I am being given from Vercel to this post. Please, any React geniuses who can shed some light it would be greatly appreciated. Thanks, Dayne

Hi @akapowl You are a magician! A simple fix that only could be spotted by someone who hasn't looked at the code over and over haha. Thanks so much for your quick response and solution. It's greatly appreciated. Dayne

Hi, I'm having trouble getting GSAP ScrollSmoother to init properly on a simple single page barebones Next.js application. I have successfully imported the GSAP core and the ScrollSmoother into the index.tsx file as I've managed to log both in the console. This is what I have in my index.tsx file: import React, { useLayoutEffect, useRef } from 'react'; import { gsap } from "gsap" import { ScrollSmoother } from "gsap/dist/ScrollSmoother" import styles from '@/styles/home.module.scss' if (typeof window !== 'undefined') { gsap.registerPlugin(ScrollSmoother); } export default function Home() { const main = useRef(); const smoother = useRef(); useLayoutEffect(() => { const ctx = gsap.context(() => { smoother.current = ScrollSmoother.create({ smooth: 1, effects: true }); }, main); return () => ctx.revert(); }, []); return ( <> <main id="scroll-wrapper" ref={main}> <div className='scroll-content'> </div> </main> </> ) } I've attached a screenshot of the error message that is populating in the browser. I have spent significant time and multiple different methods of trying to get this to work properly and am having no luck so I'd thought I'd reach out to the experts in this forum. Any help would be greatly appreciated. Thanks, Dayne

mvaneijgen this has worked perfectly! thanks so much for your help and quick reply! it's greatly appreciated.

Hi, I have a fixed social-share element that appears on scroll but I am wanting to implement ScrollTrigger to have it add a class of active if the user has scrolled 20% of the viewport and then remove the class of active once the user is 20% from the bottom of the viewport. I've tried messing with this CodePen but am having no luck: https://codepen.io/GreenSock/pen/NWxZPOp You can see how it currently behaves here: https://atmos.earth/raveena-aurora-ashas-awakening-leads-with-love/ This is my code currently: gsap.to(socialShare, { autoAlpha: 1, scrollTrigger: { trigger: "body", markers: true, start: "top -20%", end: "top -20%" } }); Any help would be greatly appreciated as it seems quite simply but it might be early morning brain fog haha. Thanks, Dayne

Hi @Rodrigo Thanks so much for your quick response! I've just implemented your code update and it looks like it's working perfectly so thank you for all of your help, Dayne