API question, How to call upon the scene instead of Div container class

I'm struggling a bit with getting Codepen code working within Hype.
Most of the time i'm able to edit codepen's to things that I'd like, but getting code working in Hype works different, looking at the Javascript API helps, however I just cant get it working.

I'm looking to implement a simple parallax effect from this pen: https://codepen.io/Sahil89/pen/OxeeNV

The code is fairly simple, in the html there's a container with 2 classes and the Javascript:

$("#container").mousemove(function(e) {
  parallaxIt(e, ".slide", -100);
  parallaxIt(e, "img", -30);
});

function parallaxIt(e, target, movement) {
  var $this = $("#container");
  var relX = e.pageX - $this.offset().left;
  var relY = e.pageY - $this.offset().top;

  TweenMax.to(target, 1, {
    x: (relX - $this.width() / 2) / $this.width() * movement,
    y: (relY - $this.height() / 2) / $this.height() * movement
  });
}

I've gave the 2 images in my Hype document a class ID, and linked the libraries from the pen in the head

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js

However, I'm just not sure what to replace the #container with in the JS.
What does Hype use to call upon the container?

I'm not sure whether to call it with hypeDocument.documentId() or with hypeDocument.currentSceneId() and how to exactly implement it in the code.

Would be highly appreciated if someone could guide this javascript learning beginner in a right direction :smile:

It is always helpful if you can post an example project.

Would it be simpler to put all elements in a group and give the group the container id.

2 Likes

Wow, that I didnt think of this :no_mouth:

I was over complicating it, this indeed worked, thanks Mark!

1 Like