Jump to content
GreenSock

jellevrswk

Animating parts of my svg when clicked on another part of the svg (it isn't working)

Go to solution Solved by PointC,

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

I need some help with animating certain parts of my svg image when clicked on another part of the svg image. 
 

This is what I'm trying to do: 

When you click on one of the smaller buttons, for example the yellowbutton, the yellowblock will appear (with opacity: 1) and the other coloured blocks will dissapear (with opacity: 0). When you click on the orangebutton, the orangebutton will appear and the other coloured blocks will dissapear etc. etc. 

 

I think I'm on the right track but something isn't working.

See the Pen rxVQLE?editors=101 by jellevrswk (@jellevrswk) on CodePen

Link to comment
Share on other sites

  • Solution

Hey jellevrswk  :),

 

The console was just throwing an error because orangebutton wasn't defined and many of the variables were assigning themselves to the yellowblock and yellowbutton. I assume because of cutting and pasting each row. You had:

var $yellowblock = $('#yellowblock'),
  $yellowbutton = $('#yellowbutton'),
  $redblock = $('#yellowblock'),
  $redbutton = $('#yellowbutton'),
  $blueblock = $('#yellowblock'),
  $bluebutton = $('#yellowbutton'),
  $greenblock = $('#yellowblock'),
  $greenbutton = $('#yellowbutton'),
  $greenblock = $('#orangebutton'),
  $greenbutton = $('#orangeblock');

 

Just fix the variable assignments... and you should be all set: 

var $yellowblock = $('#yellowblock'),
  $yellowbutton = $('#yellowbutton'),
  $redblock = $('#redblock'),
  $redbutton = $('#redbutton'),
  $blueblock = $('#blueblock'),
  $bluebutton = $('#bluebutton'),
  $greenblock = $('#greenblock'),
  $greenbutton = $('#greenbutton'),
  $orangebutton = $('#orangebutton'),
  $orangeblock = $('#orangeblock');

See the Pen VeLVEz?editors=101 by PointC (@PointC) on CodePen

 

:)

  • Like 4
Link to comment
Share on other sites

I've had those moments many times.   :-D

  • 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.
×