Jump to content
Search Community

Animating CSS Loaded SVG Background

jimmymik 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 guys, sorry, very new to this but just wondering if it's possible to animate SVG elements loaded as a background image through CSS and how I would target the elements...?

 

I have a couple of very small CSS animated SVGs at present but need them to trigger in a timeline one after another before loading a lottie/bodymovin animation which would then cycle through.

 

Not sure how I would put it into codepen but you can hopefully see an example here: http://containerizer.com/payadvantage/bpay/

 

If you go down to the How BPAY Works section you'll see it kind of working but the timing isn't quite right... the Process animation on the right is the Lottie/Bodymovin part.

 

Again, apologies, I'm very new to Greensock but loving it so far if I can just get my head around some more of the complex parts. I'm more of a video/animation guy currently, hence the bodymovin elements... ?

 

Any help or pointers very much appreciated.

Link to comment
Share on other sites

I don't think SVGs used as background can be animated using JavaScript. Your svgs are inline(included in HTML) not as background. So ya you can do that using GSAP, check out the following reply I posted yesterday.

 

 

 

  • Like 6
Link to comment
Share on other sites

Hi @jimmymik,

 

In addition to the hint from Sahil, I would say that a simple animation is easier to realize with inline SVGs.
No background image is required for your example. 

 

See the Pen xJWRVg by mikeK (@mikeK) on CodePen

 

Otherwise, I recommend the work and tutorials by Chris Gannon: 

a tutorial
an article

 

and my favorite

See the Pen ?editors=1010 by chrisgannon (@chrisgannon) on CodePen

 

Happy tweening ...

Mikel

 

 

  • Like 5
Link to comment
Share on other sites

Thank you guys, absolutely brilliant!!

 

I've kind of had to jump in to this project with 2 feet and learning as I go but good to know the fundamentals especially in regards to external SVGs and calling from CSS etc. I'll put the SVGs inline and go from there.

 

I'll run through the tutorials more too and implement as you've suggested.

 

Thanks again.

  • Like 2
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...