Jump to content

GreenSock last won the day on July 24 2019

GreenSock had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. Can you give me an example of what your code would look like to set those values manually (not with GSAP)? I'm just baffled by your comment about WeChat not supporting changing values directly in JS...yet you seem to be wanting to do exactly that. I'm sure I'm just misunderstanding something. So WeChat does have a DOM, and elements have a "style" property, but they just refuse to let you touch it? Or are you saying changes must be made a different way, like via individual attributes rather than CSS properties? I'm sure it's doable with GSAP, but I don't understand what "hooks" you have into whatever data you're wanting to change/animate.
  2. I wonder if maybe you had a cached version of that uncompressed URL. At the top, does it say "DATE: 2019-04-25"? As for when we'll push this update out, I'm not sure quite yet. Probably in another couple of weeks. You're welcome to use that preview in the mean time, though. Glad things are workin' for ya! And I'd love to hear more about the workshops you're doing - are they GSAP-focused?
  3. It looks like Chrome has issues with the way it's promoting 3D-accelerated elements to layers (for the GPU). Try setting: CSSPlugin.defaultForce3D = false; That'll force it to render anything it can to 2D transforms. Of course the down side is that you lose GPU acceleration, but I'm honestly not sure it matters if you're doing stuff inside an SVG. Oh, and if you don't want to change the default, you could just set force3D:false on each tween (or once per-element, because that setting sticks on a per-element basis).
  4. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. MorphSVG's default settings typically deliver beautiful results but sometimes you may need to tweak things to get a certain effect or avoid weird transitional states or kinks. This video explains advanced features of MorphSVGPlugin that give you plenty of flexibility. Watch the video For more information and plenty of interactive demos, check out the MorphSVG docs. Happy tweening!
  5. Very interesting! It looks like a bug in Firefox that refuses to allow access to an element's "style" when it was created using document.createElement()! Apparently Firefox only cooperates when it's created using document.createElementNS(). So weird! Like: var element = document.createElement("a"); console.log(element.style); //undefined! I have updated the next release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Oh, and you're supposed to wrap your JavaScript with <![CDATA[ ]]> I have attached a resolved file with GSAP embedded, animating a simple <rect>. Does that help? gsap-fixed.svg
  6. Ah, that makes sense. Thanks for letting us know!
  7. It looks like you tried loading "DrawSVGPlugin.min.js" instead of "GSDevTools.min.js". Completely different file
  8. Hm, I'm not sure. I don't really use Google Web Designer - perhaps you could ask the Google folks? We try to keep these forums focused on GSAP-specific questions. I know that they added the ability to insert the GreenSock files into GWD a few years ago which is great, but I couldn't tell you why their software is behaving that way right now for you. I bet they could answer your question, though. Happy tweening!
  9. It's probably easiest to just use getBoundingClientRect() to just figure out the change and adjust for it, like this: https://codepen.io/GreenSock/pen/Pgxqjy?editors=0010 Is that the result you wanted?
  10. No no, type="module" is only for if you're using an ES module but you're using the regular ES5 minified file (which is what I'd recommend). Just remove that type="module" and you should be good-to-go. If you're still having trouble, please provide a reduced test case so we can inspect what's going on. I made the change in the files you provided, and it seemed to work great.
  11. Good question. You'd just bundle the minified MorphSVGPlugin file with your other JavaScript (like...with your support files). Does that make sense?
  12. It's very difficult to troubleshoot blind, but it sure sounds like you've got an overwriting problem. You're probably creating tweens that overlap and fight each other for controlling the same property of the same object at the same time. By default, that kills the overlapping piece of that tween. You could set overwrite:false in any of your tweens, or event TweenLite.defaultOverwrite = false, but be very careful about that because it's generally a bad idea to create competing tweens like that to begin with. Actually, even the code snippet you provided shows that you've got competing tweens. For example: .to('#wheel2', 0.4, { y: -6 }, 0.5) .to('#wheel2', 0.1, { y: 0 }, 0.7) //<- this starts halfway through the previous tween! Notice the duration of that first tween is 0.4 seconds, but it's positioned at an absolute time of 0.5 in the timeline. Then, you position ANOTHER tween of the same property of the same object at 0.7 seconds into the timeline...which is overlapping the other tween by 0.2 seconds. That will cause the 2nd tween to overwrite (kill) the previous one. If you still need help, please provide a reduced test case in a codepen so we can see what's going on and we'd be happy to help.
  13. Sorry about any confusion there, but at this point GSAP only supports px-based textShadow values. The reason things got really big initially is because the browser was reporting it as 30.848px to begin (because the browser always reports computed styles in pixels), and it used your unit (em) so it was animating between 30.0848em and 0.08em. Just convert your em to a px-based value and you should be fine.
  14. GSAP is a scripted animation library that (as you probably know) is extremely popular for building banner ads with. It has nothing to do directly with video, but you could certainly use GSAP in a banner that has video displayed. Were you asking if GSAP itself can output video or something? I guess I wasn't quite sure what you meant with your question.
  15. Well, there are quite a few logic issues and various ways you could handle the fast-clicking so I just took a crack at re-coding the animation parts. Codesandbox wasn't allowing me to save anything, so I'll just paste the contents of the About.js file here: import React, { Component } from "react"; import Card from "./Card"; import { TimelineLite } from "gsap"; import styled from "styled-components"; class About extends Component { constructor(props) { super(props); this.createCards = this.createCards.bind(this); this.tl = new TimelineLite({}); this.card0 = React.createRef(); this.card1 = React.createRef(); this.card2 = React.createRef(); this.button = React.createRef(); this.flag = 0; } state = { aboutCards: [ { id: "img01", theme: "one ", header: "testing...1" }, { id: "img02", theme: "two", header: "testing..2" }, { id: "img03", theme: "three", header: "testing..3" } ] }; slideUp = () => { this.flag++; if (this.flag === this.state.aboutCards.length) { this.flag--; return; } var oldCard = this["card" + (this.flag - 1)].current, newCard = this["card" + this.flag].current, newPercent = -100 * this.flag; if (!this.tl.isActive()) { this.tl.clear().seek(0); } this.tl .to(oldCard.firstChild, 1, { yPercent: newPercent }) .to(oldCard.lastChild, 1, { yPercent: newPercent }, "-=1") .fromTo( [newCard.firstChild, newCard.lastChild], 1, { yPercent: newPercent + 100 }, { yPercent: newPercent }, "-=1" ); }; slideDown = () => { this.flag--; if (this.flag < 0) { this.flag = 0; return; } var oldCard = this["card" + (this.flag + 1)].current, newCard = this["card" + this.flag].current, newPercent = -100 * this.flag; if (!this.tl.isActive()) { this.tl.clear().seek(0); } this.tl .to(oldCard.firstChild, 1, { yPercent: newPercent }) .to(oldCard.lastChild, 1, { yPercent: newPercent }, "-=1") .fromTo( [newCard.firstChild, newCard.lastChild], 1, { yPercent: newPercent - 100 }, { yPercent: newPercent }, "-=1" ); }; render() { return ( <Wrapper className="cardWrapper"> {this.state.aboutCards.map(this.createCards)} </Wrapper> ); } createCards(card, i) { return ( <Card id={i} key={i} card={card} info={this.state.aboutCards} ref={{ ref1: this["card" + i], ref2: this.button }} slideUp={this.slideUp} slideDown={this.slideDown} /> ); } } const Wrapper = styled.div` height: 100%; margin: 0; padding: 0; overflow: hidden; `; export default About; I hope that helps.
  16. Sure, GSDevTools should work with any GSAP animations on a page. It looks like in your demo, though, you're using the ES module file directly in the browser, in a <script> tag that doesn't have type="module". That's why it's throwing errors. I'd recommend just using the minified file (GSDevTools.min.js) instead which is intended to run in that exact context. Does that help?
  17. Yes, I would echo @PointC's request. Also, you might want to look into the update() method's "sticky" parameter: https://greensock.com/docs/Utilities/Draggable/update() It sounds like it might be what you'd need
  18. I'm not at all familiar with WeChat, so I can't tell you if GSAP would work with it or not, but in general GSAP can animate any property of any object that JavaScript can touch, so I would certainly expect that it could work. Have you tried?
  19. Is that the only animations you have in each timeline? And you're placing both of those timelines into a master timeline? I think the missing piece is the master one (assuming you're using one) - you didn't show that in your code anywhere. We need to see how you're positioning things there. Can you please provide a reduced test case in codepen? That'd sure help in terms of troubleshooting. I wonder if it's only showing that way because you're using GSDevTools which, when it finds an infinitely repeating animation, treats it as if it's not (otherwise it'd make using GSDevTools totally unintuitive since the slider would be infinite). Are you getting the same behavior WITHOUT GSDevTools?
  20. I think you may have been looking for this one: https://codepen.io/GreenSock/pen/AGzci Enjoy!
  21. I'm not quite sure what behavior you want (there are many ways to handle this), but I wonder if maybe you didn't read my full answer regarding the logic issues with when from/to values get recorded. Maybe it'd give you the behavior you want if you just seek(0) right before you clear(). Does that help?
  22. Ah, maybe you were looking for something like this?: https://codepen.io/GreenSock/pen/c302e65496bfb04c09cab3a88231cd54?editors=0010 As for learning, yeah, there are a bunch of resources at https://greensock.com/learning/. The "official" book and video training is described at https://greensock.com/video-training, but there are plenty of other resources, some of which are totally free. And don't worry - a lot of people tend to over-complicate things initially. Once you get some practice in and familiarize yourself with the API/Docs, you'll feel a lot more confident and capable. Hanging around these forums can be a huge help too, as you watch how other people do things. It can spur a lot of growth in you as a developer and animator. Enjoy the ride!
  23. No no, if you kill() a timeline, it's for when you don't want to use it anymore So it'd be more like: this.tl.kill(); this.tl = new TimelineLite(); this.tl.to(...); //and you don't need to this.tl.play() because it plays by default) Or, alternatively, you could clear() an reuse the same timeline instance: this.tl.clear(); //dumps everything this.tl.to(...); this.tl.restart(); //make sure it starts from the beginning
  24. Oh, and one other thing to be very careful about - it looks like you have CSS transitions applied to some things. Keep in mind that CSS transitions kick in every...single...time any value is changed. So if GSAP changes a value 60 times per second, that means CSS transitions will be like "browser, don't actually make that change yet...I'm gonna alter that over the course of ____ seconds." which can make things appear delayed. It has nothing to do with GSAP. I'd strongly recommend never animating something with GSAP and CSS simultaneously. Happy tweening!
  25. I read your code a few times, and your question, but I don't really understand what the desired behavior is or what you mean by "and the tween prior doesn't finish". Can you please clarify? What looked very odd to me is that you've got an onComplete in a staggerTo() call...which means that onComplete will get called once for every element in the array/NodeList, and then inside that onComplete you're adding a new tween to that parent timeline at a relative time of "-=2". So you're stacking up a bunch of those that overlap and are fighting for control of the same element/value. And you can't even see the effect because by the time those animations are running, you've already faded out the element that's meant to display it. So I'm quite confused