Jump to content
GreenSock

Search the Community

Showing results for tags 'fade in'.

  • 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

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 3 results

  1. Hello! I'm doing app which returns cards from JSON array and it also have pagination. I found source code for fade in animation from web which works like a charm. I'm wondering how to make animation also Fade out. I have pagination which has 10 cards per page and when I click next page cards should fade out and after that next cards should fade in. Any ideas? I don't think I need to attach anything else than fade animation component? Here's the code I found: const FadeAnimation = ({ children, wrapperElement = "div", direction = null, delay = 0, ...props }) => { const Component = wrapperElement; let compRef = useRef(null); const distance = 5; let fadeDirection; switch (direction) { case "left": fadeDirection = { x: -distance }; break; case "right": fadeDirection = { x: distance }; break; case "up": fadeDirection = { y: distance }; break; case "down": fadeDirection = { y: -distance }; break; default: fadeDirection = { x: 0 }; } useEffect(() => { gsap.from(compRef.current, 1, { ...fadeDirection, opacity: 0, delay, }); }, [compRef, fadeDirection, delay]); return ( <Component ref={compRef} {...props}> {children} </Component> ); };
  2. gsmas

    Fade in Problem

    Hi, I have following Problem. My fade in effect function but on Start it shows the last image overlap on first image. TweenLite.to("#blackimg", 0.1, {autoAlpha:0}); TweenLite.to("#blackimg", 0.1, {autoAlpha:1, delay:0}); TweenLite.to("#redimg", 1, {autoAlpha:0}); TweenLite.to("#redimg", 1, {autoAlpha:1, delay:4}); TweenLite.to("#blueimg", 1, {autoAlpha:0}); TweenLite.to("#blueimg", 1, {autoAlpha:1, delay:6}); TweenLite.to("#greenimg", 1, {autoAlpha:0,}); TweenLite.to("#greenimg", 1, {autoAlpha:1, delay:8}); Thanks
  3. Hello all, I am newbie and just started to learn GSAP technology in my company. I have asked to create this effect using GSAP. I tried my best to find scrollTop of current message and fail to apply autoAlpha on it. Will you just check both images and can someone tell me how can I create fadein and fadeout effect scrolling up and down. I want to show current message with opacity 1 and last message with 0.5 and last second message 0.25 and so on. And when I scroll down messages opacity should change as per scroll. Please need someone early help to achieve this. Thanks in advance.
×