Levin Riegner
Business-
Posts
27 -
Joined
-
Last visited
About Levin Riegner
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
Levin Riegner's Achievements
-
SeamlessLoop helper function revered doesnt work
Levin Riegner replied to Levin Riegner's topic in GSAP
I do not at the moment, but as stated before the issue is with the timeline specifically the onEnter etc events. they cause the reversed to not work -
Levin Riegner started following GSAP splitText wraps characters in divs instead of span? , SeamlessLoop helper function revered doesnt work , ScrollTrigger change number and 1 other
-
Hey, a quick one. When using the HorizontalLoop / SeamlessLoop (https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop) helper function, the reversed option doesnt change anything. My example code: // ... React useEffect code surrounding this. const logos = logoRefs.map((ref) => ref.current); const loop = horizontalLoop(logos, { reversed: true, // Doesnt work speed: 1, // Works paused: false, // Works repeat: -1, // Works }); const performanceTimeline = gsap.timeline({ scrollTrigger: { trigger: main.current, start: 'top bottom', end: 'bottom top', scrub: true, onEnter: () => loop.play(), onLeave: () => loop.pause(), onEnterBack: () => loop.play(), onLeaveBack: () => loop.pause(), }, }); Im expecting my marquee to animate to the right vs to the left which its currently doing. As im writing this it turns out the timeline causing the reverse to not work - specifically the onEnter etc.Why is this effecting the ability to reverse? Im pausing for performance reasons (offscreen = paused, onScreen = play) Kapture 2024-01-09 at 12.49.53.mp4
-
How would you trigger the number to animate only when youve scrolled to a specific point?
-
Hey Rodrigo, the React demo you sent doesnt work - any thought son how to fix?
-
Interestingly after doing some searching and finding this article: taking the ` ` out and replacing with a span with a set width fixes the marquee issue. Gsap doesnt like white-space it seems.
-
I have an infinite marquee, that i thought was working, however it jumps at the very end slightly, im not quite sure why im wondering based on the code provided below if theres anything that looks wrong in what im doing? JSX File: const MobileMarquee = ({ client }) => { // NOTE • Refs const main = React.useRef(); const first = React.useRef(); const last = React.useRef(); React.useLayoutEffect(() => { const ctx = gsap.context(() => { // Split characters const split = new SplitText(first.current, { type: "chars", charsClass: "char", }); // Split characters count + timing calculation const charsTotal = split.chars.length; const timingFactor = charsTotal * 0.25; let timeline1 = gsap.timeline(); let timeline2 = gsap.timeline(); timeline1.fromTo( first.current, { xPercent: 0, }, { xPercent: -100, repeat: -1, duration: timingFactor, ease: "none", } ); timeline2.fromTo( last.current, { xPercent: 0, }, { xPercent: -100, repeat: -1, duration: timingFactor, ease: "none", } ); }, main); return () => ctx.revert(); }, []); return ( <Jacket isPaused={isPaused} ref={main}> <div> <ul ref={first}> {words.map(({ word, uid }) => ( <li key={uid} className="el"> {word} – </li> ))} </ul> {/* Dupl */} <ul aria-hidden="true" ref={last}> {words.map(({ word, uid }) => ( <li className="el" key={uid}> {word} – </li> ))} </ul> </div> </Jacket> ); }; CSS/JS: // Imports // ------------ import styled, { css } from "styled-components"; // Exports // ------------ export const Jacket = styled.h1( (props) => css` position: relative; z-index: 3; overflow: hidden; width: 100vw; div { display: flex; width: fit-content; } ul { display: flex; width: fit-content; position: relative; justify-content: flex-start; transform: translateX(0); li { display: flex; align-items: center; font-weight: ${props.theme.font.weight.reg}; font-family: ${props.theme.font.type.heading}; font-size: 6rem; line-height: 1.2; color: ${props.theme.colors.brand.bc4}; user-select: none; white-space: nowrap; } } ` ); Codesandbox Recreation: https://codesandbox.io/s/react-hooks-example-w-clicker-t6yno?file=/src/pages/index.js Kapture 2023-05-25 at 23.24.09.mp4
-
GSAP splitText wraps characters in divs instead of span?
Levin Riegner replied to nightlock82's topic in GSAP
After a reinstall of NPM today, everything is now working again -
GSAP splitText wraps characters in divs instead of span?
Levin Riegner replied to nightlock82's topic in GSAP
The problem here is youre importing splittext, but not from the import library, it seems to work when i create it in codepen with the trial, but not with the import in my react project -
GSAP splitText wraps characters in divs instead of span?
Levin Riegner replied to nightlock82's topic in GSAP
Why would i use the trial in my build when i pay for greensock? -
GSAP splitText wraps characters in divs instead of span?
Levin Riegner replied to nightlock82's topic in GSAP
Im not sure how to recreate it outside of my react application - where do you usually import SplitText from with the business account? -
GSAP splitText wraps characters in divs instead of span?
Levin Riegner replied to nightlock82's topic in GSAP
Without the settimeout splittext puts single words onto different lines for some bizarre reason -
GSAP splitText wraps characters in divs instead of span?
Levin Riegner replied to nightlock82's topic in GSAP
Im having to run a settimeout, as for some reason, without it gsap doesnt seem to render any animations -
GSAP splitText wraps characters in divs instead of span?
Levin Riegner replied to nightlock82's topic in GSAP
Heres my example code: // Imports // ------------ import React, { useRef, useLayoutEffect } from 'react'; import { gsap } from 'gsap'; import { SplitText } from 'gsap/all'; // Styles // ------------ import { Jacket } from './styles'; // Component // ------------ const ScrollAnimatedText = ({ children }) => { // NOTE • refs const comp = useRef(); // NOTE • Animation useLayoutEffect(() => { let timer; let split; const ctx = gsap.context(() => { timer = setTimeout(() => { const childText = comp.current.firstChild; split = new SplitText(childText, { tag: 'span', type: 'lines,words,chars', linesClass: 'line', }); const lines = comp.current.querySelectorAll('.line'); for (const line of lines) { gsap.to(line, { ease: 'none', opacity: 1, y: `0%`, scrollTrigger: { trigger: line, start: 'top bottom', end: 'top top+=60%', scrub: true, markers: false, }, stagger: { each: 0.08, from: 'start', }, }); } }, 150); }, comp); return () => { clearTimeout(timer); ctx.revert(); }; }, []); return <Jacket ref={comp}>{children}</Jacket>; }; export default React.memo(ScrollAnimatedText); -
GSAP splitText wraps characters in divs instead of span?
Levin Riegner replied to nightlock82's topic in GSAP
This doesnt work for me -
GSAP splitText wraps characters in divs instead of span?
Levin Riegner replied to nightlock82's topic in GSAP
There is no option for "tag", Chrome is complaining that i cannot have Divs inside a <p> tag, so it need it to be a span