Jump to content
GreenSock

elegantseagulls last won the day on June 21 2022

elegantseagulls had the most liked content!

elegantseagulls

Moderators
  • Posts

    641
  • Joined

  • Last visited

  • Days Won

    11

elegantseagulls last won the day on June 21 2022

elegantseagulls had the most liked content!

3 Followers

About elegantseagulls

Contact Methods

Recent Profile Visitors

6,354 profile views

elegantseagulls's Achievements

  1. Do you still get the error if you getById then kill it? GSDevTools.create({ id:"main" })) GSDevTools.getById("main").kill()
  2. This is a pretty complex functionality, but I'll try and point you in the right directions... For this, you'll want to create a timeline and use the position of your drag proxy to link 'scrub' the progress of the timeline. These are different ideas, but use draggable to control different timelines, which is more or less the same concept you're looking for: https://codepen.io/elegantseagulls/pen/eYRgXpd https://codepen.io/elegantseagulls/pen/GRxNJGK?editors=0010
  3. I'm not sure that GSDevTools is something that's meant for production... but to kill it, from the docs: How do I kill/destroy/remove the dev tools instance? If you have a reference to the dev tools (it's probably easiest to give the dev tools instance an id, i.e. GSDevTools.create({id:"main"})) then you can kill the instance by using GSDevTools.getById("main").kill().
  4. I do believe you could create the flip animation during the Barba transition, when both new and outgoing elements are available to the dom, to get the effect you're looking for.
  5. To achieve this, you'll want to get the position of each circle and check that against the position of your cursor (or use a mouseEnter or mouseOver event listener), I think it'd be best to use something like quickTo to change position of the follow ring. Docs on quickTo here: https://greensock.com/docs/v3/GSAP/gsap.quickTo()
  6. We are using next v11 on https://www.elegantseagulls.com/ Also have SSR set to true.
  7. Ok, so we've used Smoother on our site, which is built on Next.js. We setup our Smoother in _app.js (not sure this matters) This is what that code looks like: const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect; useIsomorphicLayoutEffect(() => { if (!ScrollTrigger.isTouch) { scroller.current = ScrollSmoother.create({ normalizeScroll: true, smooth: 2, }); } else { ScrollTrigger.config({ ignoreMobileResize: true }); } }, []); Everywhere else we are using regular useEffects(() => {}, []), just making sure to check if the element/ref is available.
  8. This is definitely more advanced, but you can certainly do it. You'll want to check out: https://greensock.com/docs/v3/Plugins/Draggable https://greensock.com/docs/v3/Plugins/MorphSVGPlugin
  9. You may need to run a ScrollTrigger.refresh() when the page loads up... My guess is that in production ScrollTrigger is setting up before all the dom content is setup.
  10. What version of Safari? It looks fine on my laptop's Safari.
  11. This definitely seems like an issue with how your browser renders sub-pixels on your monitor (since it is using transforms, subpixel positioning will be present). Try a -1px margin-bottom to see if that fixes the issue. I'm not able to see the issue on my machine.
  12. I cannot seem to edit the file (I tried forking the project, but couldn't get it to run properly), but I'm guessing you'll need to call your gsap timeline after the temp image is added to the page, otherwise gsap doesn't know what to call. Try console logging gsap.utils.toArray('.temp-image img") right after you create it, to see if you can target it at that point. if that's the case, you may need to call a function using that as a prop... something like: const animateTempImage = (tempImg) => { gsap.to(tempImg, { ... }) } animateTempImage(gsap.utils.toArray('.temp-image img'))
  13. I think you're missing a deps array for your useEffect (as well as garbage cleanup). useEffect(() => { ... }, [])
  14. I'd recommend reading up on how React's lifecycles work: https://reactjs.org/docs/hooks-effect.html and also this could be very useful as well:
×