Search the Community
Showing results for tags 'intersection observer'.
Found 6 results
-
Hi everybody, I'm trying to do an blur effect in the intersection between two divs. The goal that I want to get is like the image below. Can anyone help me? Thanks in advance.
-
Recently, I created gatsby project and I wanted to implement show animation to a card component. The problem comes when my 'react-intersection-observer' detects when a card appears on a screen. Then gsap gives me warning with content: 'Invalid property autoAlpha set to 0 Missing plugin? gsap.registerPlugin()' instead of animating my card component. I've already read many topics about this issue. I've tried to use 'gsap.registerPlugin()' function or to put 'CSSPlugin' to 'const plugins' but they don't solve the issue. I see the same issue when I use properties like: 'opacity' instead of 'autoAlpha'. I hope you'll point what is an issue here! There is code of my card component: export default function Card({ number, title, text, fixed, ...props }) { const [ref, inView] = useInView({ threshold: 0.2, triggerOnce: true }) function show() { gsap.registerPlugin(CSSPlugin) const tl = gsap.timeline() tl.set(ref, { autoAlpha: 0 }).to(ref, { duration: 1, autoAlpha: 1 }) } useEffect(() => { if (!inView) return show() }, [inView]) return ( <StyledCard ref={ref} {...props}> <ImageWithMask as={Img} fixed={fixed} brightValue={0.5} /> <StyledContent> <StyledSmall>{number}</StyledSmall> <Heading style={{ textAlign: "right" }}>{title}</Heading> <Paragraph className="paragraph" color={paragraphColor.grey}> {text} </Paragraph> </StyledContent> </StyledCard> ) }
-
Hi everyone, I attached a codepen demo that shows intersection observer with gsap animation. Everything works as intended, but I ran into problem if I wanted to have completly different animations for each element. I did this using multiple intersection observers (not shown in demo), but that I assume would be a hit on performance and also bad for DRY code. I made it very simple in demo, but the real examples would be animating different elements with different animations, so for sake of keeping it simple, let's say I want each box to be translated form different side. What kind of approach would be needed to put everything in one intersection observer? Is there any codepen example I can try to savlage of? -
Hey guys. I am trying to make a morph shape with gsap plugin. The result I want to achieve is: THE GOAL IS: Find svg's with class "morph" and runs timeline animation only for the one's that is in the viewport. THE ISSUE I HAVE: I did some work in the codepen, but the issue is, that every time my window detects the svg class "morph" it start to animate all the shapes/timelines on the website - and not only the ones visible in the viewport. Any ideas how to adjust my codepen? Thank you in advance -
Hello, I hope you can help me with this. I am trying to create a custom hook for creating an image parallax using intersectionObserver API. Seems work partially but when I scroll I get this error: backend.js:6 Invalid property y set to 47.666666666666664 Missing plugin? gsap.registerPlugin() My goal: using Y or backgroundPosition from/to everytime the element is visible. import React, { useEffect } from 'react'; import { gsap } from 'gsap/all'; function useImageParallax(imagesParentSelector) { useEffect(() => { const appWrapper = document.querySelector('.app--layout'); const elements = document.querySelectorAll(imagesParentSelector); const scrollHandler = () => { let options = { root: null, }; // parallax effect let observer = new IntersectionObserver(function(entries) { entries.forEach((entry) => { const offset = appWrapper.scrollTop / 3; gsap.to(entry, { y: offset }); }); }, options); for (let elm of elements) { observer.observe(elm); } }; appWrapper.addEventListener('scroll', scrollHandler, { capture: false, passive: true }); return () => { appWrapper.removeEventListener('scroll', scrollHandler, { capture: false, passive: true }); }; }, [gsap]); } export default useImageParallax;
-
Hello,I have a basic animation for 3 items. It is from a section of a site I am building so I cleaned it up just to show the essentials. The 3 sections all animate once they are in the viewport. It is working but I really feel like there might be an easier way to set this up with less code. If this is the best option then I will go with it. But if anyone sees anything that can be improved (either with less code and/or better performance) please let me know. Also a huge thanks to the posts in this thread: https://greensock.com/forums/topic/20831-svg-tweenmax-and-intersection-observerI was having problems getting the animation's basic functionality working and used the ideas in this thread to get it working.Thanks in advance for any assistance with improving this animation.
