Jump to content

Rodrigo last won the day on March 17 2019

Rodrigo had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Rodrigo

  1. I assume that the bundling process doesn't return any errors and that the styles are being applied to the DOM. This happens both in development and production? In your webpack dev file I found this commented out: // new MiniCssExtractPlugin({ // filename: '[name].css', // // chunkFilename: '[id].[contenthash].css', // }), So I assume that in development the CSS is being added to a <style> tag in the header section, right?. Honestly at this point I'm a bit lost and running out of ideas, because this error: Cannot access rules, basically means that the rules plugin can't find the rule you're passing to it. I think we'll need some live sample to check. Finally just in case, have you tried to rename the actual css class to something without any underscores?.
  2. Hi, Unfortunately nothing of this is getting us closer to solve this. You haven't informed us what type of app this is, React, Vue, Meteor, jQuery, etc? That could be critical in order to narrow it down, so please let us know about that part. Also it would be nice to know two things. First, right after creating the css rule variable could you add the following code: var menuLine = CSSRulePlugin.getRule(".header__outer:after"); // add this console.log( document.querySelector(".header__outer") ); This in order to know if the element is actually in the DOM at that point (which is related to @Jonathan's post regarding the fact of what is going on with the DOM when the code is executed). Second, you mentioned that you're using webpack with SASS loader. What is exactly your webpack config just regarding that (we do not need to see your entire webpack.config.js file right now, just the part of getting the SASS files and turning them to CSS. I assume that you're using the SASS loader first and then the CSS loader. In the same regard, is your CSS actually being bundled and visible on the project (again and sorry for being so persistent about it, what type of project we're talking about here). Happy Tweening!!
  3. Hi, I don't know if this is completely related to webpack. The error comes from the css rule returning null. Unfortunately the information you're providing is not enough to get a complete idea of what you're trying to do and your setup. If you're working with React, or VueJS this thread could help you: Here is a live sample: https://stackblitz.com/edit/gsap-react-pseudo-element-tween Beyond that is not much I can do to help you. Happy tweening!!
  4. Hi, Honestly I don't know how that can be done with just GSAP. Perhaps using ThreeJS and GSAP but I know nothing about ThreeJS. What I can tell you is that this particular letter: Was handed to my by a client as a PNG sequence. It is used in Streammm which is a native App. I worked on the front end that uses GSAP and PIXI, so my first guess is that this could be made using a 3D rendering software or engine. Here is the map used to create the animation in PIXI: I'll ask my client about the origin of the image and let you know just in case. Sorry that I can't help you beyond this. Happy Tweening!!!
  5. You're welcome. Well is just a pattern that you'll see quite a bit here in the forums and some bits I gathered throughout my time here. First unless is necessary I always create Timeline instances paused, because otherwise the time is already running and the playhead is moving forward. Granted, normal JS execution to add the instances might take only a few milliseconds but in some cases that could cause some unexpected behaviour. Now I'll jump forward to this: tl.reversed( !tl.reversed() ); Reversed is a getter/setter of the reverse status of a GSAP instance. By default all GSAP instance are created and going forward, therefore by default reversed() returns false. Since I'm using reversed() as a setter (by passing the opposite value) I need that the reverse status of the timeline to be true. Now since I created the timeline paused the playhead won't go anywhere unless I change that, hence I add a reverse() call at the end of the timeline. Now the timeline is paused, so I'm telling the timeline: "Go from being paused to play backward", but since the timeline is at zero seconds and negative time doesn't exists (although @GreenSock and/or @OSUblake might be working on that ) the timeline stays put at zero seconds and the reversed() value is true. Then on the first click (or any other event that triggers it) I toggle the reversed() value to false, which tells the timeline to go forward and so forth. Basically is just a way of doing it without the conditional block in it, which saves a tiny amount of time and a couple of lines of code. Hopefully this makes things more clear about it. Happy Tweening!!!
  6. Hi, I don't know if this is the ideal way of doing it, but the best approach I can think of is to create a reference to the timeline instance in the data() callback: data() { return { tween: new TimelineLite({ paused: true }) }; }, Then in the mounted hook, add the instances to the timeline: mounted: function() { this.tween .to(this.$refs.appLogo, 2, { rotation: 360 }) .reverse(); } And finally in the methods object define a method to play/reverse the instance: methods: { toggleLogoTween: function() { this.tween.reversed(!this.tween.reversed()); } }, Here is a live reduced sample: https://codesandbox.io/s/l261n378km Happy Tweening!!
  7. Hi Robert, Check the docs for NPM usage: https://greensock.com/docs/NPMUsage Scroll a bit until you find the part of tree shaking. It should be a bit like this: import { TweenLite, ScrollToPlugin } from "gsap/all"; const scrollPlugin = ScrollToPlugin; Try that and let us know how it goes. Happy tweening!!
  8. Hi, Here is a live sample of the React component using React Router: https://stackblitz.com/edit/gsap-bootsrap-slide-sidebar I'm going to start creating a re-usable component, but due to other things I'm working on, it might take a while to get it done, but for now that shouldn't be too hard to use. I'll try to set up a public repository with the code and the styles so this can be added to Create React App and it can be customized as needed. Happy Tweening!!!
  9. Hi, I'm not much into using those type of animations but as I suspected there is a scrollspy package for Vue2. Now I suspect that this is triggering an event that could help you start your GSAP animations, but you'll have to look for it in the API and/or the source code: https://github.com/ibufu/vue2-scrollspy Also you have these: https://bootstrap-vue.js.org/docs/directives/scrollspy https://www.vuescript.com/highlight-menu-items-scroll-navscroll-js/ And here are a lot of options, some of them might be useful some not: https://vuejsexamples.com/tag/scroll/
  10. Hi, Besides Jack's great example here is something I made some time ago for a React app: https://codepen.io/rhernando/pen/ebgoNZ Of course it has the constraint that it uses Bootstrap for the styles (the whole project was built on bootstrap and I made a couple of components for it). It's base on this other trying to use GSAP for Materialize's sidebar nav: Hopefully this will be helpful in some fashion. Happy Tweening!!!
  11. Yep, Jack is right. That is a bit complex to do. I didn't checked the article but for what I saw, they're using a simple object on top of each image with the same background color, that hides the images and then is translated to create the reveal effect (at first I thought it could be mask clip, but since it has such a limited browser support they went this route). Also inspecting the demo I found some familiar updates in the inline transitions and it turns out that they're using GSAP for this: https://tympanus.net/Development/PageFlipLayout/js/demo.js Finally for using GSAP with React some fella around here, that has everyone fooled thinking He is good at using React with GSAP, wrote an article about it: https://greensock.com/react Happy Tweening!!!
  12. Hi, @GreenSock is right. The main concern when dealing with any type of shadow dom library/framework is what's called DOM reconciliation (something @OSUblake has more knowledge than I am). Here's what React's official docs say about reconciliation: https://reactjs.org/docs/reconciliation.html But back on the specific question, yeah the issue is that GSAP doesn't have the slightest idea of what could make the resulting DOM to change and as Jack mentioned is a bad idea performance-wise, so GSAP takes care of it's own end and so does React (and Vue and other shadow dom libraries as well). They work in what's called a reactive way. Something changes that makes necessary a DOM update. The good news is that all those tools offer what's normally called lifecycle methods/hooks (do not confuse with the new hooks API introduced by React) which help you do stuff, before or after the DOM is going to change as a result of a state property being mutated. That's why in every piece of documentation is highly discouraged to reach and manipulate the DOM directly, hence the usage of references (refs). The only thing you have to be careful about is that if an animation is running a somehow your DOM could change and remove the tween target, be sure to kill those animations in order to prevent an error being thrown. Here is where the lifecycle methods are handy because you can use them to create the animations once the DOM has been updated and you can be sure that the elements you want to animate are present and you wont get an error or unwanted behaviour, and that you will be able to act before those elements are removed. As you mention, seems that you've been selecting elements after those elements are rendered, so they are there and as you can see, since that's just good ol' plain javascript, it works. But is safer and more appropriate to follow each library's guides and patterns to do so. Finally, I've check some things about React hooks but I haven't mix them with GSAP for two reasons. First, I haven't had enough time. Two, keep in mind that hooks are on the roadmap of version 17 of React, they are still a proposal and the React team is gathering information, bugs and opinions from the community as well as doing their own tests, so thechance that the API could have some major differences from what it is now is not small, so I try to stay away from using them in any type of production code. Also I don't like to invest a lot of time in things that are not even in beta or at least release candidate (RC version), because of changes in the future. But as you mention the effect hook is an easier way of triggering something because a state change. Hooks are very nice and a great addition to React and most devs I've shared some thoughts on them, are very in to hooks (they are hooked ), so they are here to stay most likely, but changes in their API will be inevitable moving toward a stable release. I'll see if I can whip something using hooks, but you caught me in a couple of bad days, so perhaps tomorrow night or Friday I could get into that. In the mean time feel free to continue the discussion here or if you want you can PM me. Happy Tweening!!
  13. Hi, Is not very easy to get an idea of what exactly you want to do (for me at least), without a live sample to test and modify. Please try to provide a codepen sample using this base for the Morph SVG Plugin: Based on what you've posted the first idea that comes to my mind is using the mouse position to update the timeScale property of a TweenMax instance (in order to use the repeat: -1 and yoyo properties of that particular class): https://greensock.com/docs/TweenMax/timeScale() Here is an approximation of an element in the center of the screen (using flex) with an endless pulse animation. The animation's timescale is updated on the mouse move event attached to the document: Hopefully this is enough to get you started. Happy tweening!!
  14. Hi, Is not completely clear to me what you're trying to do here. You want to delay the animation of the x position but not the text or you want different delays for the text and the position?. Something like short delay for the text and long delay for the x position tween?. Please clarify this in order to understand correctly what you're trying to do and how to solve the issue. Happy Tweening!!
  15. Agreed, is necessary some sample code to get the real issue you're facing. In the mean time here is a simple example of using GSAP in a for loop changing a the string in a PIXI text instance: Also the issue in your code could stem from the fact that you're adding the onStart callback inside the pixi:{} config object, note that I don't use the pixi wrapper in this case, since I'm not tweening any PIXI related property, just updating the text. Try removing the onStart callback out of the pixi config object, try again and let us know how it goes. Happy Tweening!!!
  16. Hi Rick, Well, actually passing anything between sibling components or up the chain in React and Vue is a bit complex actually, that's why you can rely on Redux, MobX and VueX. If you're starting with React, I think that @OSUblake's approach is the best. Is simple and works in the way you expect. Right now my recommendation would be to get more familiar and comfortable with React and then move onto using Redux for more complex tasks and when your apps need to observe changes in the app's state. In that case you could use redux observable, but as I mentioned, it would be better to start with the basics of redux and then move into more advanced stuff. You can watch this free course by Dan Abramov (creator of Redux and part of the React team) about getting started with React and Redux: https://egghead.io/courses/getting-started-with-redux Also this article by Lin Clark is very good as well: https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6 Happy Tweening!!!
  17. Hi, Besides @mikel's great solution for this you can see this sample I made of an endless marquee in React using the modifiers plugin. It shouldn't be too complicated to port this to Vue though and using Draggable to control the position of the elements:
  18. Hi, Without more info about other libraries/frameworks you're using, my guess is that you're using webpack or a CLI that uses webpack for the build process. So perhaps this has to do with tree shaking: https://greensock.com/docs/NPMUsage Scroll down a bit and you'll find the tree shaking part. If this doesn't help, please provide more details about what you're doing, your setup and perhaps a reduced live sample or a setup file to take a look in our local environments for testing. Happy Tweening!!
  19. Hi and welcome to the GreenSock forums. Just use the componentDidMount method (careful now with calling them hooks, it can create a bit of a confusion ) and also remember that the CSS Rule needs to be wrapped in the cssRule: {} configuration object: componentDidMount() { console.log( this.button ); const rule = CSSRulePlugin.getRule(".element:before"); console.log( rule ); TweenLite.to( rule, 1, { cssRule: { bottom: 0 }, delay: 1 }); } I know that the norm is to use the refs for to get the DOM node, but keep in mind that pseudo elements are not DOM elements (as far as I know at least but I could be wrong about it), so there is no way to get the pseudo element the react-way soto speak. My advice would be to store the rule in the component's instance (in the constructor method) and when you need to access it just use that reference to check if it exists before using it in a GSAP instance. This sample seems to work: https://stackblitz.com/edit/gsap-react-pseudo-element-tween?file=index.js Hope that it helps you in some way. Happy Tweening!!!
  20. Well, that really looks nice!!! Great job Beau!!!
  21. Mhhh.... seems to work here: https://stackblitz.com/edit/block-reveal-effect-with-greensock-17645 Perhaps there was a momentary issue with the bundling process
  22. Well @Sahil is spot on (that's why He is a superstar around here ). The only thing I'd change is using the ref callback instead of reaching to the DOM directly. So instead of this: componentDidMount(){ const loaderContainer = document.querySelector("#loader-container"); const loader = document.querySelector("#loader"); this.tl .to(loader, 1, { y: -250, delay: 0.3 }) .to(loaderContainer, 0.2, { alpha: 0, display: "none" }; } I would create a reference in the constructor: constructor(props){ super(props); this.loaderContainer = null; this.loader = null; } Then in the render method use the ref callback: render(){ return <div> <div ref={ e => this.loaderContainer = e }> <div ref={ e => this.loader = e }> </div> </div </div>; } Finally in the component did mount method: componentDidMount(){ this.tl .to(this.loader, 1, { y: -250, delay: 0.3 }) .to(this.loaderContainer, 0.2, { alpha: 0, display: "none" }; } But beyond that small detail just do what @Sahil is doing and you'll be fine. Happy Tweening!!