heyitsA
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by heyitsA
-
-
Thanks, @OSUblake.
Trying to do one more thing. I am relatively new to js so don't know how to achieve the next codepen.
See the Pen KKMmVOW?editors=0010 by esadrian (@esadrian) on CodePen
I know the logic must be something like substract the scrollTop and calculate elements width and height and the relative position of the mouse, but I don't know how to fit it with your demo.
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var boundingRect = jsF.getBoundingClientRect(); var halfDiff = Math.abs(boundingRect.width - boundingRect.height) / 2; var relX = e.pageX - boundingRect.left - halfDiff; var relY = e.pageY - boundingRect.top; x: (relX - boundingRect.width / 2), y: (relY - boundingRect.height / 2 - scrollTop),
Also, is the timer being used in your previous demo?
var timer = gsap.delayedCall(5, () => { showAnimation.reverse(); }).pause();
-
Hey @ZachSaucier I'm back with this topic trying to make it with the .quickSetter() with the help of other demos but I don't know how to achieve it.
In my particular example, where do I put the setters if I don't use tweens?
gsap.to(wrap.mContent, { x: (relX - boundingRect.width / 2) * movement, y: (relY - boundingRect.height / 2 - scrollTop) * movement, ease: "power1", duration: 0.6 });
var xSet = gsap.quickSetter(wrap.mContent, "x", "px"); var ySet = gsap.quickSetter(wrap.mContent, "y", "px");
-
Thanks for the response, Zach.
I gathered every toggle in a new function and called it onEnter and onLeaveBack. I was also missing
.classList
on the toggle and got wrongonEnter: () => function() {
instead ofonEnter: () => {
.I did read the docs before posting, but my understanding was not that great with the example shown .
At least I finally got it right! haha
See the Pen RwRavdd by esadrian (@esadrian) on CodePen
- 1
-
Hi!
Few questions:
1) What if I want to add different classes to each target? for example set
.leave
to.box1
and.active
to.box2
and.hide
to.box3
2) If I want the toggled class to stay on scrolled pass the trigger, I've read that is what
onEnter, onLeave, onEnterBack, onLeaveBack
is for and not thetoggleClass
, but don't know how to use it.3) Is it better to create a timeline and add the effects on GSAP instead of creating CSS classes?
I had this made with ScrollMagic but want to switch to GSAP's ScrollTriger.
This is where I'm at
See the Pen XWKdxZR by esadrian (@esadrian) on CodePen
-
11 minutes ago, ZachSaucier said:
It already does that? What do you mean?
I mean the center of the content (the ball) same position as the cursor.
-
thanks @ZachSaucier. It's been a good 4 hours trying every possibility I was feeling helpless, I am so bad at JS. You posting the solution in 5 mins is mindblowing.
Now that I have you here: how would you make to make the button magnetic but on the red area only? Probably a totally different function there, but how...
-
Hi @Carl @Sahil. I used something similar that the third post.
I am trying now to get rid of jQuery but my knowledge is very limited.
I want to use vanilla JS and have more than a single button (two) use the same magnetic function.
To achieve this correctly, I have to find the magnetic area and magnetic content inside the magnetic wrap I am currently hovering, which I don't know how to do correctly in vanilla JS. (See second example).
This example works fine on vanilla JS.
See the Pen xxVvbRN?editors=0010 by esadrian (@esadrian) on CodePen
Second example with two buttons on vanilla JS (NOT WORKING)See the Pen YzyrJbO?editors=0010 by esadrian (@esadrian) on CodePen
Second example with two buttons on jQuery (Working bad: after too many hovers on the element, the magnetic duration seems instant.)See the Pen PoPKGZJ?editors=0010 by esadrian (@esadrian) on CodePen
-
Text rotator
in GSAP
thanks @ZachSaucier I was getting crazy trying to figure out the error haha
-
Text rotator
in GSAP
Hello! I was exactly looking for this, but it gives me a weird flickering bug on chrome. Is it outdated?
Here is the video: https://streamable.com/erd5tz
-
Hey @OSUblake, I like the idea, but I've tried selecting the heading and it acts very weirdly even if I put
pointer-events: none;
to.ball
.Also: how would you make the ball visible only when the mouse if on the viewport? Seeing it visible on the window border is not really appealing.
And what would happen in mobile devices, is it better to completely remove it?
Follow by mouse
in GSAP
Posted
Hey @ZachSaucier I wrote it here because these were two different examples. The other one has a "magnetic area" and this one's area is the whole section. But maybe it's as you say it's better to gather both on one function and determine if there is an explicit magnetic area take that and if not, the previous container. Sorry if it was an inconvenience.