Jump to content


  • Posts

  • Joined

  • Last visited

About venn

  • Birthday 12/29/1986

Contact Methods

Profile Information

  • Gender

Recent Profile Visitors

4,244 profile views

venn's Achievements




Community Answers

  1. Also further to add on this. Engineers in my company earlier on have been activity seeking out for any motion libraries we could use. The options were around React-spring, React-transition-group, Framer motion, CSS... Not sure if there's any roadmap plan for GSAP to consider this.
  2. Thanks team. Sorry should have been clearer. What I meant was a declarative approach in using GASP with React. I'm also aware of react-gsap but I'm wondering if there's any official support from GSAP? I'm a designer and I use it a lot when it comes to UI prototyping in React. The thing being as a designer you don't get the luxury to do coding on a daily basis and I'm surrounded by all these React developers it's just easier to seek help immediately if it's in React. But that's just my use case too ? might not be common. However these days I've been using Framer X motion more but still deeply miss the power and ease of use from GSAP.
  3. Hi there, This questions may have been asked. I'm also aware of https://greensock.com/react/ But I'm wondering if GSAP is going to invest in creating a React library from the ground up? I'm asking this because: 1) Big fan boy of GSAP. Love the power and elegant of it! Most importantly super friendly and helpful folks. I used to use GSAP a lot when I'm in the digital/advertising agencies. 2) Unfortunately, now I work in a product world (Atlassian) where the company is big on React tech stack. Cheers, Venn.
  4. @OSUblake Ah I figured it out. My grid-column-template is having 12 columns defined but in reality it's only showing 4 columns.
  5. @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?
  6. 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!
  7. 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
  8. Btw guys, I have fixed this problem to get around Framer API. Thanks all!
  9. Visually it looks correct, but there is a problem with the event propagation deep under.
  10. 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?
  11. 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?
  12. Thanks, this example perfectly demonstrate my problem.
  13. 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?
  14. 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?
  15. 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?