Rodrigo last won the day on January 13

Rodrigo had the most liked content!

Rodrigo

Moderators
  • Content Count

    1,667
  • Joined

  • Last visited

  • Days Won

    152

Rodrigo last won the day on January 13

Rodrigo had the most liked content!

Community Reputation

2,293 Superhero

About Rodrigo

  • Rank
    Advanced Member

Contact Methods

  • Skype
    r_hernando

Profile Information

  • Gender
    Male
  • Location
    Santiago - Chile

Recent Profile Visitors

21,384 profile views
  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. What about this?: console.log( $(".header__outer") );
  3. 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!!
  4. 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!!
  5. Rodrigo

    Bending object as its animated along bezier path?

    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!!!
  6. Rodrigo

    Ideal vue.js setup for playing and reversing timelines

    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!!!
  7. Rodrigo

    Ideal vue.js setup for playing and reversing timelines

    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!!
  8. Rodrigo

    ScrollToPlugin fails in webpack production build

    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!!
  9. Rodrigo

    Side NavBar Expand and Contract Animation

    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!!!
  10. 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/
  11. Rodrigo

    Side NavBar Expand and Contract Animation

    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!!!
  12. Rodrigo

    Page transition in React

    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!!!
  13. 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!!
  14. Rodrigo

    animate pulse by distance

    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!!
  15. Rodrigo

    TweenMax in Loop - Delay Issue

    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!!