Jump to content
GreenSock

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

eviljeff

Members
  • Posts

    17
  • Joined

  • Last visited

Everything posted by eviljeff

  1. That's great, I didn't know that!! Thank you I love GSAP so much
  2. Hi, I am trying to figure out a similar doubt. Is it possible to know when a timeline label starts/ends? I have a vertical navigation that should react to the timeline labels (for example I have labels "0", "1") and they don't reflect the screen height (like full height panels) or anything similar. It's just a one page scrolling website with multiple sections. This is my ScrollTrigger function ScrollTrigger.create({ animation: tl, trigger: ".page__wrapper", start: "0", end: "+=400%", scrub: 1, pin: true, anticipatePin: 1 }) and the timeline is a mix of to/from animations const tl = gsap.timeline({paused: true, defaults:{duration: 1, ease:'expo.easeOut'}}); tl.addLabel("start") .to(page, {backgroundColor: '#F8C0C6', duration: .5}) .from(item0content, {yPercent: 120, duration: .5}, "<") .addLabel("0") .to(item0content, {yPercent: -120, duration: 1, delay: 1}) .to(item0, {scale: .95, delay: .5, duration: .5}) .to(item0, {yPercent: -100, duration: .5}) .to(page, {backgroundColor: 'rgb(210, 227, 203)', duration: .5}, "<") .set(item1, {scale: .95, duration: .5}, "<") .from(item1, {yPercent: 100, duration: .5}, "<") .to(item1, {scale: 1, duration: .5}) .from(item1content, {yPercent: 120, duration: .5, delay: 1}, "<") .addLabel("1"); I need the navigation dots to add/remove the active class when the labels enter/leave the timeline on scroll. So for example, on scroll, when the timeline gets to the label "0", the first navigation dot gets the active class and so on. Is that possible? Thanks
  3. Hi @OSUblake Thank you so much. That is very helpful! All the best
  4. Hi @dude9 Long shot here since it has been almost a year since this post, but did you manage to make it work in the end? I need to replicate the same animation, but without the images grid. I need to make the draggable full page element drag automatically depending on the mouse position. I hope you can point me into the right direction. Thanks
  5. Hi Jack, thank you for your reply. From your experience, would implementing something like this https://codepen.io/biblos/pen/KRJmey or this https://codepen.io/mikeK/pen/RwGGmVv improve performance or would it still be a performance killer on that specific SVG? I'm not really good with 2d renderings and math operations so recreating the SVG on a canvas would be an impossible task for me. Thank you
  6. Hi there, Is there a way to improve the performance on an SVG with hundreds of paths animating at the same time? If that's not possible, a solution to animate less paths would be good, but I've not found a solution to that yet unfortunately. For example to only animate the paths closer to the mouse cursor. Any help with this would be greatly appreciated. Thanks
  7. Hi @FrankRuiz I've still not resolved this issue unfortunately. I've read that your issue was being due to a package. Could you please let me know what package that was? I'm using Frontity, which is a framework a bit like Gatsby so perhaps they use similar packages. Thanks you
  8. Hi @Rodrigo Thanks for your reply! I have tried removing the styled components and used styles declarations using objects but unfortunately that didn't solved the issue. Do you have any idea what kind of package could be causing conflicts? I know this goes out of scope, but would you be so kind to let me know if there is a way to debug package conflicts? Thank you so much!!
  9. Hi guys, I'm sorry if I cannot be of any further help with the codesandbox editing issue. I can start a live session which allows participant to edit the code. If that's not possible, do you have a rough idea by looking at the code what could be wrong? I've hit a brick wall with it. I really hope you can help. Thank you
  10. Hi @Rodrigo I hope you'll be able to help me with my scrolltrigger/react issue. The issue happens with the pinning functionality only. The pin works fine but when I navigate to another page (in the below example is the About page) I get an error Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. If I comment out the pin parameter I don't get the error anymore. Here is a codesandbox that replicates the issue. https://codesandbox.io/s/falling-sunset-iytl0?file=/packages/mars-theme/src/components/verticalSlider.js Are you able to figure out what is wrong with my code? Thank you!!
  11. Oh sorry, are you able to update it from this link after signing in? https://codesandbox.io/live/ht7buy4. Thank you
  12. Hi @OSUblake thank you for looking into this. You should be able to edit the codesandbox by clicking on Fork in the top right.
  13. Hi there, I have an issue with the ScrollTrigger pin functionality on a React (Frontity) project. The pin works fine but when I navigate to another page I get a major error Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. If I comment out the pin functionality I don't get the error anymore. Here is a sandbox that replicates the issue. https://codesandbox.io/s/falling-sunset-iytl0?file=/packages/mars-theme/src/components/verticalSlider.js Does anyone have any idea why that is happening? Many thanks, Jeff
  14. I did try hard coding a string ID and that didn't make a difference. If I run ScrollTrigger.getAll() on the useEffect unmount I get all of my 4 ScrollTrigger instances. Should I see 3 in the array if the kill function I'm trying to run would execute correctly? The one I'm trying to kill is the second one in the array.
  15. Thank you. I've tried that but unfortunately it doesn't fix it. The animation doesn't fire when navigating away but I still get the same error. I believe that the .kill() function doesn't really work..? If I console log titleElTrigger before and after the kill it looks like the ScrollTrigger is still alive. Is that correct? return () => { const titleElTrigger = ScrollTrigger.getById(`${ ns }-title`); if (titleElTrigger) { console.log(titleElTrigger); titleElTrigger.kill(); console.log('After the kill ======='); console.log(titleElTrigger); } } // the console logs look identical ScrollTrigger {start: 5034, progress: 0, media: undefined, scroller: Window, scroll: ƒ, …} After the kill ======= ScrollTrigger {start: 5034, progress: 0, media: undefined, scroller: Window, scroll: ƒ, …} Thank you so much for the help.
  16. Hi @FrankRuiz, Thank you so much for the quick reply! I have tried that out just now but I still get the same error Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. Below is my full component, do you see any other issue that could cause the error to show up? If I comment out pin: true then the error won't appear. I truly appreciate your help. Thanks import React, { useState, useRef, useEffect } from 'react'; import { connect, styled } from 'frontity'; import { gsap } from 'gsap'; import { ScrollTrigger } from "gsap/ScrollTrigger"; import ArrowLink from '../UI/arrowLink'; import SwiperCore, { Pagination, Controller, EffectFade, Mousewheel } from 'swiper'; import { Swiper, SwiperSlide } from 'swiper/react'; import Animation from '../UI/animation'; import svg2 from '../../assets/img/animation-homepage-2.svg'; import tw from 'twin.macro'; SwiperCore.use([Pagination, Controller, EffectFade, Mousewheel]); const VerticalSlider = ({ content, libraries, data }) => { const [firstSwiper, setFirstSwiper] = useState(null); const [secondSwiper, setSecondSwiper] = useState(null); const pinnedRef = useRef(null); const { slides } = content; const params1 = { direction: 'vertical', // mousewheel: { // releaseOnEdges: true, // forceToAxis: true, // eventsTarget: ".vertical-slider-wrapper" // }, speed: 1000, pagination: { clickable: true, }, slidesPerView: 1, controller: { control: secondSwiper } }; const params2 = { preloadImages: false, lazy: true, noSwiping: true, effect: 'fade', controller: { control: firstSwiper } }; useEffect(() => { if (pinnedRef.current) { let ns = Math.random().toString(36).substring(7); gsap.to(pinnedRef.current, { duration: .3, scrollTrigger: { id: `${ ns }-title`, trigger: pinnedRef.current, start: "top top", end: "200%", pin: true, pinSpacing: "100%" } }); } return () => { const titleElTrigger = ScrollTrigger.getById(`${ ns }-title`); if (titleElTrigger) { titleElTrigger.kill(); } } }, []); return ( <VerticalSliderWrapper className="vertical-slider-wrapper" ref={pinnedRef}> <VerticalSliderCol tw="z-0"> <Swiper {...params2} onSwiper={setSecondSwiper}> {slides && slides.map((slide, i) => { const { image } = slide; return ( <SwiperSlide key={i.toString()}> <ImageSlide bg={image} /> </SwiperSlide> ) })} </Swiper> </VerticalSliderCol> {data.isHome && <SvgWrapper> <Animation svg={svg2} elId="emy803gonfxd1" /> </SvgWrapper> } <VerticalSliderCol tw="z-20"> <Swiper {...params1} onSwiper={setFirstSwiper}> {slides && slides.map((slide, i) => { const { copy, heading, link_text, link_url } = slide; const Html2React = libraries.html2react.Component; const linkUrl = libraries.source.normalize(link_url); return ( <SwiperSlide key={i.toString()}> <ContentSlide> <div> <p>{heading}</p> <Html2React html={copy} /> {linkUrl && <ArrowLink link={linkUrl} text={link_text} className="arrow-green" />} </div> </ContentSlide> </SwiperSlide> ) })} </Swiper> </VerticalSliderCol> </VerticalSliderWrapper> ); }; export default connect(VerticalSlider); const VerticalSliderWrapper = tw.div` relative flex flex-wrap md:flex-nowrap pt-10 md:pt-20 max-w-full max-h-screen `; const VerticalSliderCol = tw.div` md:w-1/2 `; const ImageSlide = styled.div` ${tw`bg-cover h-full w-full`} background-image: url(${props => props.bg}) `; const ContentSlide = styled.div` ${tw`p-10 md:p-14 md:pr-20 2xl:p-20 2xl:pr-40 flex items-center h-full`} `; const SvgWrapper = styled.div` ${tw`absolute w-3/5 z-10 pointer-events-none`} right: 25vw; top: -25vh; `;
  17. Hi @FrankRuiz, I'm having the exact same issue. When the component is unmounted I get the error Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. This is the useEffect() function useEffect(() => { const pin = gsap.to(pinnedRef.current, { duration: .3, scrollTrigger: { trigger: pinnedRef.current, start: "top top", end: "200%", pin: true, pinReparent: true, pinSpacing: "100%" } }); return () => { pin.kill(); console.log('killed component'); } }, []); I know it has been a long time ago, but are you able to give more details on how you resolved the issue? These are the packages I am importing in the component Thank you! import React, { useState, useRef, useEffect } from 'react'; import { connect, styled } from 'frontity'; import { gsap } from 'gsap'; import ArrowLink from '../UI/arrowLink'; import SwiperCore, { Pagination, Controller, EffectFade, Mousewheel } from 'swiper'; import { Swiper, SwiperSlide } from 'swiper/react'; import Animation from '../UI/animation'; import svg2 from '../../assets/img/animation-homepage-2.svg'; import tw from 'twin.macro';
×