Leaderboard

Here's an article on stacking multiple images and using clip-path. (it uses CSS animations, but you can easily convert it to GSAP) https://tympanus.net/codrops/2017/12/21/css-glitch-effect/ Pixi has a glitch filter https://pixijs.io/pixi-filters/docs/PIXI.filters.GlitchFilter.html Happy tweening.

Hello @Yaniv Nagar and welcome to the GreenSock Forum! This is not a bug, but your targeting a CSS Rule that does not exist in your compiled CSS. You must match the CSS Rule exactly, meaning use the same CSS Rule selector in your compiled CSS in your CSSRulePlugin getRule(). Your issue is that your asking GSAP CSSRulePlugin to find a specific selector, but your not giving the same selector as shown in your CSS. If you look closely your SCSS CSS when compiled show this as your selector: .header .level_number:before not .level_number:before which is why it fails // The CSS rule in your compiled CSS .header .level_number:before // But you are trying to target this CSS rule which is not exactly in your compiled CSS .level_number:before // They dont match that is why it fails. So please use like you were doing CSSRulePlugin.getRule(".header .level_number:before"); So you want to make sure that your GSAP selector for the rule is the same as whats in your CSS rule selector. As a rule of thumb when using the CSSRulePlugin you want to always use the exact CSS Rule selector since that is what your trying to animate, that exact CSS rule in your CSS. Happy Tweening!

Hi @devwise, Welcome to the GreenSock Forum. ScrollMagic is a well-documented library. And you will find many suggestions there. Please set up a test case to see where it is stuck with your code. Here's just an attempt to handle your case, as I understand it, without using another library. But to trigger the animation once caused by scrolling is tricky. The timeout solution is certainly not the best. After lunch: why not just a flag? Happy tweening ... Mikel

Hi @Chelle Service Capital Inc, Welcome to the GreenSock Forum. Have you researched on CodePen? Take a look at this example: Kind regards Mikel

your demo had a lot of code I didn't understand especially relating to the 2 different Draggables that were being enabled and disabled. The biggest problem seemed to be in the selector you were using for Draggable too var drag = $('body .jacket-image .active svg'); Not sure why the selector needs to be that complicated but it appears its trying to select the entire svg. Since the SVG includes the patch and the jacket image I think its better just to select the patch so I gave the patch a clear id of "patch". I got rid of all the code that was not related to keeping the patch draggable within the bounds of the back of the jacket and this seems to work. var R = Draggable.create( "#patch", { type: "x,y", bounds:{minX:-100, maxX:80, minY:-50, maxY:200}});

Thank you for your feedback Mikel. I will try implementing your example as well as look on the Scrollmagic documentation. I recall trying position fixed on the container div, and for some reason this was sending the div to the top of the whole web site.....not just the viewport. Not sure why...could it have something to do with the window.scrollTop()? Anyhow I will attempt to solve this starting with your example and post back with some code If I run into any issues. Thank you again!

Hi and welcome to the GreenSock forums, Sorry to hear you are having some trouble. Not really sure why this would behave like this sometimes (more likely after a reboot) on that specific device. In order to get the most eyes and devices on this, the best thing to do would be to create a very simple online demo that we can test and edit. We recommend CodePen for this, but there are plenty of similar services (jsfiddle, jsbin, plunkr, etc) that work the same: The demo only needs to contain the SVG and the animation code.

Thanks for the demos. Yeah, this is a bit tricky as your demos illustrate that your code works fine with both versions of TweenMax. I'm not at all familiar with Semplice so I don't really know what it could be doing. The next thing you could do is create a very basic version with just the animations that aren't working and post a link to where we can view it.

I played around with React and Redux once... ? Too many rules and constraints, and I like touching the DOM, so I set out to find something better. That's when I came across some nice VDOM alternatives, lit-html and hyperHTML. They're faster, more efficient, and accessing DOM nodes is perfectly ok. It's definitely worth checking out. Here's your simple list of elements demo using lit-html. Codepen doesn't have syntax highlighting, but there are plugins for that on VS Code.

Hi and welcome to the GreenSock forums. First I love the avatar!!!! Second, yep there's a lack of documentation for GSAP + React / React Native out there. Unfortunately tools like Pose and Transition Group help only with simple tasks, when the time comes to make complex animations things get a bit complicated. There is (actually was) a tool for that (https://github.com/azazdeaz/react-gsap-enhancer) but is no longer maintained so not much to do there. Also in this scenarios we run into React's declarative nature, which is quite unique and the fact that the React team doesn't help too much in getting access to the DOM elements. In fact I've read some comments and Tweets from Dan Abramov (creator of Redux and part of the React and React Create App teams), where He declares that accessing the DOM nodes should be a no-no and that is anti-pattern. Obviously Dan hasn't done a single complex animation in His life on a React app ;). Back to the issue the most robust tool I use (and that's just one guy's opinion) is React Transition Group (RTG), because it takes care of the DOM operations and reconciliation when the components get mounted, unmounted, updated, etc., so with it we can take care of only creating our GSAP code. The caveat (there's always one of those, right?) is to create the transition component to use GSAP in it, but once you get the hang of it you'll see is not too complicated because RTG's API is quite simple. Here are some samples using GASP with RTG: Simple list of elements (this has some commented out code, that's the code to use... [sigh] CSS Transitions, but the sample actually uses GSAP) https://codesandbox.io/s/7lp1q8wba Mount / UnMount a component https://codesandbox.io/s/yvye9nnw Draggable Rotation https://codesandbox.io/s/jrkbkxeqy Now the first two need a major update because they're using React 15.x, when you could still use string refs for the dom elements. Now a days you need a different approach for it, like this: But updating it shouldn't be too complex. If you still find some issues on the road, please don't hesitate to create a codepen or sandbox to get a look at it. The idea is to encourage people to keep using GSAP and spread it as the standard for web animations. Happy Tweening!!!

The above examples animated CSS gradients. Here are some examples animating SVG gradients using GSAP: Animating an SVG linear gradient with GSAP http://codepen.io/jonathan/pen/mPGrRN Animating an SVG radial gradient with GSAP http://codepen.io/jonathan/pen/ZWKmrK Basically i am using a staggerTo() tween which can take advantage of the special cycle property. Learn more about that here: http://greensock.com/gsap-1-18-0