venn

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.

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.

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.

@OSUblake Ah I figured it out. My grid-column-template is having 12 columns defined but in reality it's only showing 4 columns.

@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

Btw guys, I have fixed this problem to get around Framer API. Thanks all!

Visually it looks correct, but there is a problem with the event propagation deep under.

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?

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?

Thanks, this example perfectly demonstrate my problem.

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?

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?

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?

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?

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.

Yes! This is what I want to achieve. Been scratching my head and trying many ways. You save my soul thanks.

I am trying to drag my SVG clip-path however it seems that I can't target it? The orange backdrop isn't following the circle number and the stem.

A quick and seemingly simple question but I can't seem to find a better way to do this. I wanted my elementA to tween space * 2 to the left of its current position with space being 256px. However what is the cleaner way to do something like that? x: "-=" + space*2 seems complex. var space = 256; TweenMax.to(elementA, 3, {x: "-="+space*2}); I could do something like this in ES6 `-=${space*2}` but still looks complex. Thanks, Venn.

You are way too smart Blake! var log = console.log.bind(console); I tried google to understand this but can't digest the meaning. Are you able to explain this in simple english to silly me?

Thanks Blake! That's some next level Javascript there. I am trying to convert what you have done to ES6 instead. Is there a way? Or is what you have suggested the best way? get x() { return this.opacity; } set x(value) { this.visible = !!value; this.opacity = value; } and is this necessary? enumerable: true, configurable: true The code seems to be working alright without them? And I notice you use this? var log = console.log.bind(console); What's that sorcery? --- Another easy but can prove to be challenging and less robust in the future way: TweenMax.to(haha, 3, {opacity: 0, onComplete: done}); function done(){ this.target.visible = false; }

Thanks Carl and Jonathan for being so helpful! Yes, I am much aware that: testVar = yolo.querySelector("#test"); TweenMax.to(testVar, 3, {autoAlpha: 0, repeat: -1}); Will work. But my problem here is essentially what Jonathan has demonstrated. I would like to target the Framer layer itself (yolo) not the html layer (#test) that is created insider a Framer layer. My assumption is that a Framer layer is just a normal div layer so I am not sure why autoAlpha will not work on it. Maybe there is more to it. As Jonathan mentioned, I can apply opacity to a Framer layer but I can't control the visibility property of it. There is something with Framer.js that is overriding or supersede it. Lol. Framer has a .visible property but that will just set display: none instead of visibility: hidden. - I tried to use GSAP to add a CSS class to it: .invi{ visibility: hidden; } TweenMax.to(yolo, 3, {className: "invi"}); <-- Will not work But it is not working too. I can only use the Framer api to add CSS class: yolo.classList.add("invi") <-- Will work I am even thinking if GSAP can tween Framer API, something absurb like TweenMax.to(yolo, 3, {yolo.classList.add: "invi"}); <-- Will not work https://framerjs.com/docs/#layer.classList In the past, I have tried tweening Framer API using GSAP and it works. TweenMax.to(yolo, 3, {blur:20}); <-- Will work https://framerjs.com/docs/#layer.blur --- So I am guessing a layer created in Framer has something going on.

Sorry for not being clear. No it hasn't. I am trying to get TweenMax.to(yolo, 3, {autoAlpha: 0, repeat: -1}); to work but it can't. yolo is a layer I have created using Framer.

Here you go, this is the codepen http://codepen.io/vennsoh/pen/BQBYeL As you can see, // Autoalpha (This will not work) TweenMax.to(yolo, 3, {autoAlpha: 0, repeat: -1}); // Autoalpha (This will work) TweenMax.to(yolo, 3, {x: 500, repeat: -1}); // Autoalpha (This will work) TweenMax.to(testVar, 3, {autoAlpha: 0, repeat: -1}); According to Framer, I need to create a variable that query the HTML in a Framer layer in order to get a reference to a DOM. https://framerjs.com/docs/#layer.html If you need to target any of the created elements, remember that they are only available after Framer rendered them. To reliably get a reference to a DOM element, use layer.querySelector or layer.querySelectorAll --- It seems that I can only target the HTML elements but not the Framer layers? However Framer layers are essentially a HTML <div> element. I am not sure why I can't target it. I am suspecting this is how Framer renders it. Maybe it is not available when GSAP is trying to perform some actions on it or some other Framer thing is overwriting GSAP stuff.