it en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en de en en fr en en ca en en en en en en ro ro en en da en en en en en en en en en en en en en en en en fr en en fr sv en fr en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ro en en en de en en en en en es en en en en en en en de en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
@OSUblake Ah I figured it out. My grid-column-template is having 12 columns defined but in reality it's only showing 4 columns.
Measure centre point of draggable
venn replied to mikemhz's topic in GSAP
@OSUblake I spent abit more time on my responsive grid and I got to a pretty good state. However I notice some weird thing with my draggable sidebar. If you drag your browser window size from ~1024 to ~1220 and if you drag the sidebar out, you will see that the sidebar is actually growing till a max size of 400 which is what our clamp function is doing. However it's growing the size in the opposite way (right hand side instead of left) hence creating horizontal scrollbar. I tried to fix it but in vain. Any thoughts?
Oh wow, your code is so elegant! After testing further it seems that my code is buggy. I need to dig further and see how you did that. Thanks!
Hi @OSUblake This is awesome. I'm trying to repurpose some logic in your codepen to make mine work. I'm creating a responsive layout grid. And I'm trying to create a resizable sidebar "d". The user should be able to drag the red handle to increase the width. Currently everything is working except that I can't figure how I can constraint my sidebar to a maximum width of 400 and min width of 64? (I think I've figured out!) Using .style.width isn't very reliable. I need to use this.x for my if condition
How do I hover on elementB that is only revealed when I hover on elementB?
venn replied to venn's topic in GSAP
Btw guys, I have fixed this problem to get around Framer API. Thanks all!
How do I hover on elementB that is only revealed when I hover on elementB?
venn replied to venn's topic in GSAP
Visually it looks correct, but there is a problem with the event propagation deep under.
How do I hover on elementB that is only revealed when I hover on elementB?
venn replied to venn's topic in GSAP
Thanks Jonathan. Your example works particularly well. But currently I am using Framer.js + GSAP. And in Framer there isn't mouseenter or mouseleave but only API for mouseover and mouseout. I wonder if that is the case, how do I use event.propagation() to solve this?
How do I hover on elementB that is only revealed when I hover on elementB?
venn replied to venn's topic in GSAP
I have created a pen on this using pure javascript. I did a console.log to see when mouseout and mouseover is called. Apparently when you mouseover on "slide" element in my example, it will fire mouseout and mouseover on "container". I thought it shouldn't fire mouseover/out again on "container" since your cursor is already on top of it?
How do I hover on elementB that is only revealed when I hover on elementB?
venn replied to venn's topic in GSAP
Thanks, this example perfectly demonstrate my problem.
How do I hover on elementB that is only revealed when I hover on elementB?
venn posted a topic in GSAP
I have more of a simple programming question that I can't quite figure out. I have a sidebar that will expand and collapse on hover. And within the sidebar I have a few menu items that have hover states. What I want to do is to hover on the sidebar, it gets expanded and the menu items get revealed and as a user I can hover on the menu items. However the problem is that, when my mouse cursor moves to the menu items, my sidebar will trigger mouseOut event and this makes the sidebar collapses. How can I hover on my sidebar and also hover on my menu items that are inside the sidebar at the same time?
How to loop a RoughEase tween infinitely with a yoyo effect?
venn replied to venn's topic in GSAP
Ah thanks! The way of defining into a variable is clearer. I have added yoyo and repeat into the ease config. Also curious how is RoughEase different from using CustomWiggle?
How to loop a RoughEase tween infinitely with a yoyo effect?
venn posted a topic in GSAP
TweenLite.to(graph, 2.5, { ease: RoughEase.ease.config({ template: Power0.easeNone, strength: 1, points: 50, taper: "none", randomize: true, clamp: true}), y: -500 }); Am I correct to say RoughEase only applies to TweenLite but not TweenMax? I tried changing it to TweenMax and add repeat: -1 but it doesn't work? And also I tried adding yoyo:true but it doesn't work?
TweenMax.to works but not TweenMax.staggerTo when pair with .play()?
venn posted a topic in GSAP
var TweenA = TweenMax.staggerTo([dot1, dot2, dot3], 2, {opacity: 1, repeat: -1, paused: true}, 0.2); TweenA.play(0); var TweenB = TweenMax.to(dot1, 1, {x: 50, repeat: -1, paused: true}); TweenB.play(0); Hi I tried to get my .staggerTo() to store into a variable and control it using .play() but however I can't get it working? But it works for normal .to() Any reasons?
How to drag SVG clip-path with GSAP draggable?
venn replied to venn's topic in GSAP
The only problem with this is that the actual draggable area is the number and the stem but I can't include the whole rectangle area.
How to drag SVG clip-path with GSAP draggable?
venn replied to venn's topic in GSAP
Yes! This is what I want to achieve. Been scratching my head and trying many ways. You save my soul thanks.
“Honestly think without TweenMax, I'd of changed careers by now; it's that good.”
“This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive.”
“The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation.”
“@greensock is just pure awesomeness. What more can be said?”
“With the incredible functionality, and the mind-blowing customer service, the price of Club GreenSock admission is well worth it!”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“Really quite impressed with @GreenSock JS - even the small things.”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s”
“There is no doubt that GreenSock is currently the best available tool for creating astonishing interactive websites and animation effects.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.