Jump to content
GreenSock

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

Search the Community

Showing results for tags 'intersection observer'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

  • FAQ

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 5 results

  1. 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> ) }
  2. 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?
  3. 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
  4. 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;
  5. 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.
×