Jump to content
Search Community

Ken burn effect with text and background-color

RyRInfo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, I am new to GreenSock, I want to create a ken burn effect with background-image, text inside and background-color that cover the background-image. I dont know how to do it. Can somebody help me?


Is there a page with GreenSock effects tutorials?


Thank you so much!

Link to comment
Share on other sites

Welcome to the forums, @RyRInfo! And thanks for being a Club GreenSock member.


You can certainly create that effect using GSAP, although I probably wouldn't recommend doing it with background-image because that's limited to whole pixel values for position, so it can look rather jerky at slow speeds. It'd be much better to just use a regular image element or I guess you could use a <div> with background-image, but animate that whole element (and you can make the container <div> overflow:hidden). That way, you get the benefit of using transforms which tap into sub-pixel rendering. It's usually better for performance too. 


This thread might be useful: 


If you still need some help, please post a codepen demo that we can peek at. 


As for GreenSock effect tutorials, we have a learning section at https://greensock.com/learning but there isn't an article specifically talking about the Ken Burns effect. There are tons of GSAP tutorials scattered across the web, though, so Google is your friend :)


Happy tweening!


  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...