Jump to content
GreenSock

TheShizzolator

onClick, elements not moving

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

If you could share the link to your codepen demo, so we can see what your code looks like?

 

Or you can fork my codepen example and change it to your liking:

 

Example:

See the Pen uHrLn by jonathan (@jonathan) on CodePen

 

I didn't use images but you get the idea by clicking the boxes.

 

:)

Link to comment
Share on other sites

Sorry do you know where I can locate the css for my edge project? I can only locate the CSS for the stage with the html document...

Link to comment
Share on other sites

See the Pen uHrLn by jonathan (@jonathan) on CodePen

 

Here is my code pen, the css is from the .js file that is part of the edge project, this is the best I could do, I added the position: relative and nothing changed...

Link to comment
Share on other sites

I didnt see any of the changes you made, since that link you posted is the same as my link...

 

You will have to go to my example, and click the button named "fork" .. that creates a copy for you to change.. and then post that link back here..

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