Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
LucitheR

Physics 2D example for click eventhandler on a dot

Go to solution Solved by Jonathan,

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 or Moin,

 

first of all i'm a newbie to GSAP, so i may miss the obvious and i'm in a bit of a peril

i copied the physics2d Demo, and thought to make it a simple Game, clicking a dot turns it red,but i can't seem to add eventhandlers to the dots. 

The docs for those tween lite didn't state any callback for the tweened objects, so i ask for your kind help.

 

how stupid am i?

 

here's my codepen

 

 

cheers, Jan

 

-edit: typo

See the Pen QNdgWK?editors=0010 by realLucitheR (@realLucitheR) on CodePen

Link to comment
Share on other sites

Hello LucitheR and Welcome to the GreenSock Forum!

 

This is happening due to a JS error in the browser console:

ReferenceError: replayReveal is not defined

Your calling a function replayReveal() on line 33, but you don't have have a function with that name in your code.

 

:)

  • Like 1
Link to comment
Share on other sites

Hello LucitheR and Welcome to the GreenSock Forum!

 

This is happening due to a JS error in the browser console:

ReferenceError: replayReveal is not defined

Your calling a function replayReveal() on line 33, but you don't have have a function with that name in your code.

 

:)

thanks, i'm new to Codepen, too;  i have deleted it  but still no event :(

Link to comment
Share on other sites

  • Solution

Its still happening because there is a inline style of pointer-events:none on the div with an id #featureBackground

 

The pointer-events: none CSS property will disable any mouse or touch events its applied to.

 

You could add this to your style-sheet to override that inline style on #featureBackground or just remove pointer-events: none from that div in your source code

#featureBackground {
   pointer-events:auto !important;
}

The !important declaration makes sure it overrides any inline styles on the tag.

 

See the Pen grgXJg?editors=0010 by jonathan (@jonathan) on CodePen

 

If your still having issues GreenSock's Jack and Carl will have to look into why pointer-events is being applied on your elements parent.

 

:)

  • Like 4
Link to comment
Share on other sites

yay, that works! thank you all :mrgreen:

 

 

Its still happening because there is a inline style of pointer-events:none on the div with an id #featureBackground

 

The pointer-events: none CSS property will disable any mouse or touch events its applied to.

 

You could add this to your style-sheet to override that inline style on #featureBackground or just remove pointer-events: none from that div in your source code

#featureBackground {
   pointer-events:auto !important;
}

The !important declaration makes sure it overrides any inline styles on the tag.

 

See the Pen grgXJg?editors=0010 by jonathan (@jonathan) on CodePen

 

If your still having issues GreenSock's Jack and Carl will have to look into why pointer-events is being applied on the dragged elements parent.

 

:)

 

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