Jump to content


  • Posts

  • Joined

  • Last visited

About venn

  • Birthday 12/29/1986

Contact Methods

Profile Information

  • Gender

Recent Profile Visitors

3,375 profile views

venn's Achievements


Newbie (1/14)




Community Answers

  1. @OSUblake Ah I figured it out. My grid-column-template is having 12 columns defined but in reality it's only showing 4 columns.
  2. @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?
  3. 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!
  4. 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
  5. Btw guys, I have fixed this problem to get around Framer API. Thanks all!
  6. Visually it looks correct, but there is a problem with the event propagation deep under.
  7. 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?
  8. 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?
  9. Thanks, this example perfectly demonstrate my problem.
  10. 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?
  11. 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?
  12. 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?
  13. 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?
  14. 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.
  15. Yes! This is what I want to achieve. Been scratching my head and trying many ways. You save my soul thanks.