Jump to content
Search Community

onClick, elements not moving

TheShizzolator 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 there I have a problem, I have an element that I want to be clickable and when the user clicks it I want TweenMax to shift other element within the stage a certain amount of pixels to the right, here is my code

// Gets an element. For example, 
// var element = sym.$("Text2");
// element.hide();
var element = sym.$("Geyser_Pic");


TweenMax.to(element, 1, {css:{right:"0px"}});

// Gets an element. For example, 
// var element = sym.$("Text2");
// element.hide();
var element = sym.$("Volcano");]

TweenMax.to(element, 1, {css:{right:"150px"}});

// Gets an element. For example, 
// var element = sym.$("Text2");
// element.hide();
var element = sym.$("HotSpring");

TweenMax.to(element, 1, {css:{right:"100"}});

Link to comment
Share on other sites

Hello TheShizzolator, and Welcome to the GreenSock Forums!

 

I'm a little confused on what your asking:

  • Are you asking how to make your code above triggered when a button is clicked?
  • Do you need to have 3 separate buttons, for the 3 tweens above?

Also, here is a video tut by GreenSock on how to create a codpen demo.

 

Any additional information will help us in helping you, Thanks :)

  • Like 1
Link to comment
Share on other sites

Okay I have looked into how to create a codepen pen, how do I find the css properties of my elements?

 

Basically each element is a picture and I would like each picture to be clickable, when each is clicked the other elements around it shift to reveal hidden text, I have not added the code for the text yet. At the moment when I click, nothing happens, according to the code pen video it could be something in the CSS, but I don't know where to find the css for a particular object

 

Regards

 

George

Link to comment
Share on other sites

Unfortunately that code is not something we (or CodePen) can work with. Its all very specific to and dependent on lots of Edge files being present. 

 

It would be very helpful if you could create a very basic CodePen example (with just a few divs or images) that illustrates the setup you have.

 

Right now it seems that Edge is adding a layer of complexity that isn't necessary to discuss the key problem of "moving elements when another element is clicked". Once we can figure out what you need on a basic level, you can then handle integrating it with Edge (which we're not very familiar with).

Link to comment
Share on other sites

  • 2 weeks later...

First off you have a rogue square bracket after the Volcano line.

I would also recommend assigning different variable names to your elements. This will cache them making them usable later.

 

I've also removed the css object (which you are using correctly but is not required).

 

Try changing...

// Gets an element. For example, 
// var element = sym.$("Text2");
// element.hide();
var element = sym.$("Geyser_Pic");


TweenMax.to(element, 1, {css:{right:"0px"}});

// Gets an element. For example, 
// var element = sym.$("Text2");
// element.hide();
var element = sym.$("Volcano");]

TweenMax.to(element, 1, {css:{right:"150px"}});

// Gets an element. For example, 
// var element = sym.$("Text2");
// element.hide();
var element = sym.$("HotSpring");

TweenMax.to(element, 1, {css:{right:"100"}});

to this:

//tells it to go to x pos 0
var geyser_pic = sym.$("Geyser_Pic");
TweenMax.to(geyser_pic, 1, {x:0});

// Moves it 150px to the right of its current x position - the quotes mean 'add this value to my current  
var volcano = sym.$("Volcano");
TweenMax.to(volcano, 1, {x:"150"});

// Moves it 100px to the right of its current x position- the quotes mean 'add this value to my current   
var hotspring = sym.$("HotSpring");
TweenMax.to(hotspring, 1, {x:"100"});
  • Like 3
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...