Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About velkas

  • Rank
  1. I may be wrong but I believe that end: top bottom means to end the animation when the top of the animated element reaches the bottom of the viewport. So end: top bottom-20px would end the animation when the animated element is 20px below the bottom of the viewport.
  2. After some fiddling, the solution I came up with was to conditionally render the children. The scroll requires a ref to the scroll container so the init function is placed inside useEffect to guarantee the ref is defined. And because this component is at the "top level" we don't need to pass location to the useEffect callback. This seems to work but any improvements or suggestions are welcome 🤷‍♂️ import React, { useRef, useEffect, useState } from "react" import Navbar from "./navbar" import Scroll from './scroll' import '../styles/smooth-scrollbar.css' const Layout = ({ children
  3. Exactly what I was looking for. Thank you.
  4. Marquee seems to break on resize. Loads and runs as expected on refresh. Any ideas?
  5. I am using Gatsby JS and initializing smooth-scrollbar within a layout component and I've also configured the scroller proxy. Within a child component, I'm trying to setup an animation using scroll trigger but I'm not sure how to configure this. Also, the config does work after HMR fires but not after page refresh. I removed most of the markup from the page as I know the animation works - I think the issue is with syncing the scrollers. layout.js: import React, { useRef, useEffect } from "react" import Navbar from "./navbar" import { gsap } from "gsap"; import { ScrollTrigger }
  6. Removing spaces between elements in HTML resolved the issue. Additionally I think a better alternative is to use flexbox. I've updated the pen to use flexbox.
  7. I've seen a lot of posts about trying to create a marquee section similar to the one on Cuberto's home page. I'm trying to recreate the marquee but the animation seems to "jump" when looping. I'm thinking my math maybe off in the modifier callback? EDIT: Inspecting the dom elements it seems the row items are overflowing the row slightly possibly because of whitespace generated from using inline-blocks.
  8. Thanks, that all makes sense. The one part I'm having trouble understanding is the "dummy object". I understand the concept but am having trouble implementing the solution. I've created a minimal demo here: https://codesandbox.io/s/react-threejs-gsap-i0id1?file=/src/index.js And to reiterate, as the sections are scrolled, I would like to update the intensity (and other props) simultaneously. Again, the ultimate goal is to smoothly transition the blob colors from red to green to blue as the sections are scrolled. Hope that makes sense and let me know if there's anything
  9. My goal is update a Three JS scene (colors, camera position, material properties, etc.) based on state properties set by the timeline. My scene is rendered inside of the BlobScene component which accepts an intensity prop. In the sample below, I'd like to update the intensity as the timeline is scrubbed which then updates the light intensity of my scene. In the pinned section, there are two columns: the left column contains text that will be translated into view and the right column contains the BlobScene. My ultimate goal is to change the color of the blob for each corresponding t