Jump to content
GreenSock

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

LazyLoad Image with gsap fadeIn option

Recommended Posts

Hey guys,

I need a little help with. I want to redo my lazy load with a gsap animation that can replace "SRC" for "DATA-SRC" with fadeIn effect.
So the new - full-size Image will fade over the Old one.
Any help is much than appreciated. Thank you!
 

See the Pen abOyJxr by jurajmolnar (@jurajmolnar) on CodePen

Share this post


Link to post
Share on other sites

Hey Juraj. What are you having trouble with? Unfortunately we don't have the capacity to build out every request that people make in the forums but if you have a specific question or issue we're happy to help.

Share this post


Link to post
Share on other sites

Both of the below examples use GSAP and IntersectionObserver for lazy loading images. You would just need to convert them to use GSAP 3 and whatever lazyload script/approach you prefer. Each should allow for you to build upon this type of approach and refactor either within your own project.

 

See the Pen eYOpROp by ItsLefty (@ItsLefty) on CodePen

See the Pen WWqZWj by jomartinez27 (@jomartinez27) on CodePen

 

** Most of this topic is unrelated to GreenSock specifically, but hopefully one of those can provide a starting point for you to achieve your desired result.

  • Like 5

Share this post


Link to post
Share on other sites

thank you guys ;)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×