Jump to content
GreenSock

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

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. Hi! I'm working currently on a banner creative and am stumbling upon an issue. An external creation bureau has delivered a video in which the creative animation is portrayed. The video contains one animation where a section is fading in from left to right (opacity reaches 1 on the left earlier than on the right) over a background image. Is there any way to fade something in from left to right using Greensock? Thanks in advance! Gerben
  3. Hello everyone! I just started using the GSAP library a few days ago and I am having an absolute blast! However, I have been struggling to achieve this fade-in effect for a page I am building (check it out here). The idea (just like in the codepen that I linked and the actual page) is to have the page fade-in from above when the DOM is loaded. Initially, I just added a fromTo Tween, then I added the window.onload function and inserted the code in there. Both "solutions" failed, as the content appears and then the animation procs. I wanted the animation to proc as soon as the DOM is ready. I am assuming the solution is simple, though, I only have a basic understanding of JavaScript and the GSAP library so I cannot seem to solve this. Any input?
×