All Activity

This stream auto-updates     

  1. Past hour
  2. GreenSock

    Animation messes up clicked quickly

    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.
  3. Today
  4. GreenSock

    Dose GSDevTools work with DoubleClick ad Banner?

    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?
  5. 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
  6. GreenSock

    GSAP how to manipulate animation without accessing actual DOM?

    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?
  7. Hi, I'm using WeChat Mini Program which is based on JSCore and doesn't have DOM to manipulate(like native Android APP). Is there anyway to use GSAP in JSCore and without accessing actual DOM? It would be too pity not using GSAP. The Mini Program official website is https://developers.weixin.qq.com/miniprogram/en/dev/index.html?t=19042222 . Thank you for your help!
  8. eccojava

    reverse() do not work inside a function

    Thanks for your help, and sorry for the long code. GRACIAS
  9. Yesterday
  10. Hi @Snape, Welcome to the forums. It's pretty tough to troubleshoot with just a few pasted lines of code and a screengrab. Do you think you could put that into a demo for us? More info: That'll give you the best chance of someone being able to help you. Thanks and happy tweening.
  11. PointC

    reverse() do not work inside a function

    The problem is you have a listener on the reverse button that will indeed reverse the timeline, but that button is inside the div with the listener to play the timeline. So when you click to reverse, the event bubbles up to the parent and instantly plays the timeline. You'll need to stopPropagation() to make this work. I stripped out all the extra timelines and unnecessary code in this fork: https://codepen.io/PointC/pen/mgjZzR more info about stopPropagation(): https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation We appreciate demos with questions, but if you can simplify them to a bare minimum when you have a question, that would be great. Happy tweening.
  12. Hi I have not a lot of experience programming. I try to do a small project to practice an to learn about GSAP. I have a problem wen I try to reverse a Timeline, I Think is becase the function that execute the reverse() is inside an other function. the problem appears when I click the first photo an then it move that photo an it reveal a text a 2 buttons; the black button on the left should reverse the timeline "exp1". The line code where Is the reverse() in JS is line 74 Hope some one can help with this problem
  13. PointC

    Can I specify the element variable?

    I'd probably just check if a timeline isActive and set the progress to 1. Then create the appropriate new timeline. Maybe like this: https://codepen.io/PointC/pen/wZxRbb Happy tweening.
  14. Hi I'm trying to make the GSDveTools works with Google DoubleClick Ad Banner. (Remove it and submit the Ad banner to DobuleClick when I get approve from the client.) I follow the tutorial from GS but the timeline tools doesn't show up. Please help. Archive.zip
  15. qqignatqq

    Can I specify the element variable?

    That's what I'm looking for. This is the form of sending the letter to the post office and I need the result of sending. The user can click on the "Send message" button several times and I need the animation to work every time. How can I reset the animation and restart it? I tried to put "clear()" in different places, but I failed. If the form is valid and the "NO" animation is not finished yet, it should end and the "YES" message should appear I'm sorry if I'm not clear, I'm using a translator. Композиция 1 (1).mp4
  16. bdrtsky

    Please help to find that pen

    @GreenSock yes, this is it! Thank you! And if you don't mind I'll kinda "steal" it too 😀 This demo is so amazing. I was literally laughing while looking at it.
  17. Hi, I have options with gray border and selected with gray background: <div class="options"> <div class="item">Criancas</div> <div class="item">Bebes</div> <div class="item">Brinquedos</div> </div> <div class="selected"> </div> On javascript part all of items are Draggable. And have the function onRelease that checks if the item "hit" the "selected" div. All works fine, but the final animation. When I Drag the item is ok, but when i release it, the animation to go "back" to the x:0 and y:0 of the new parent starts from the another side of screen. When the item change parent they get new x and y and the release animation starts from that new coordinates. How can i make the release animation starts from the actual coordinates relative to the new parent and avoid this bump? Thks
  18. GreenSock

    keep infinitely looping timelines separated in time

    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?
  19. Alexander75

    Animation messes up clicked quickly

    I'm just trying to get it to reverse without offsetting the slides if clicked quickly. I've tried your suggestion and ended up with something like this on each timeline, switch (this.flag) { case 0: this.tl .seek(0) .clear() .to(this.card0.current.firstChild, 0.7, { y: "-100%" }, "firstSlide") .to(this.card0.current.lastChild, 0.7, { y: "-100%" }, "firstSlide") .to(this.card1.current.firstChild, 0.7, { y: "-100%" }, "firstSlide") .to(this.card1.current.lastChild, 0.7, { y: "-100%" }, "firstSlide") .to(this.card2.current, 0.7, { y: "-100%" }, "firstSlide"); this.flag += 1; this.tl.restart(); break; } It doesn't seem to be working for me. I'm going to try to specify fromTo values like you suggested.
  20. PointC

    Please help to find that pen

    hmmm... how have I not seen that pen before now? 🤔 Or have I and forgot it? I honestly can't tell anymore. In any case, I'm stealing it and claiming total credit if anyone asks who made it.
  21. antialias

    keep infinitely looping timelines separated in time

    Thanks Carl, I want the timelines to restart independently so that they phase against each other. I just tried this test: ////////////////////// timeline 4 plane 3 var tl4 = new TimelineMax( {paused:false, repeat:-1, id: 'one' }) tl4.to(plane3.scale, 5, {delay: 5, x: 3.0, ease:Power1.easeInOut }) // scale plane 3 tl4.to(plane3.scale, 5, {delay: 5, x: 2.0, ease:Power1.easeInOut }) // scale plane 3 ////////////////////// timeline 5 plane 4 //////////////////////////////////////////////////////////////// var tl5 = new TimelineMax( {paused:false, repeat:-1, id:'two'}) tl5.to(plane4.scale, 4, {delay: 5, y: 2.0, ease:Power1.easeInOut }) // scale plane 4 tl5.to(plane4.scale, 4, {delay: 5, y: 0.5, ease:Power1.easeInOut }) // scale plane 4 //////// The timelines restart in sync after the global timeline loops, even though the DevTools gui shows durations of 20 and 18 seconds respectively. I want them to get slowly out of sync. Do I need two global timelines?
  22. GreenSock

    Please help to find that pen

    I think you may have been looking for this one: https://codepen.io/GreenSock/pen/AGzci Enjoy!
  23. PointC

    keep infinitely looping timelines separated in time

    I'm not sure I follow your question. Are you saying you want the two timelines in this scenario to always restart at the same time? If so, you can set a repeatDelay on the timeline with the shorter duration. If I've misunderstood your question, could you please add a few more details? Thanks.
  24. Suppose you had an infinitely looping timeline of duration 60 seconds, and a second infinitely looping timeline of duration 61 seconds. How would you have them playing concurrently so they stay separated in time? I am making a generative artwork and want to have the animation sequences shift against each other in time, as you would do with audio loops of slightly different durations.
  25. PointC

    Please help to find that pen

    I'm not sure what pen you mean, but setting the duration based on word length would be fairly easy. Just use a duration variable and multiply it by the string.length. More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length Happy tweening.
  26. PointC

    Can I specify the element variable?

    You can't restart a timeline with a new target. That's why I suggested creating a tween/timeline in your click handler. You may want to make two timelines and play the appropriate one. You could also clear the main timeline on each click and repopulate it with new tweens upon click. You can check if it's active and quickly set the progress() to 1 before clearing so you don't get weird jumps. There are lots of possibilities. I don't really understand what you're doing so it's hard to give the best advice.
  27. bdrtsky

    Please help to find that pen

    Good day. kinda dumb question, but recently I found awesome Pen from one of forum members and didn't save it. It was SplitText effect, where words appeared like this - https://tobiasahlin.com/moving-letters/#4 But the interesting part was that it calculated the word length and for long words the pause was longer. Can you please help me to find it? It was one of you guys
  28. qqignatqq

    Can I specify the element variable?

    In your version, I have to wait for the animation to reopen, and in my version, restart() is triggered. https://codepen.io/anon/pen/YMvbeo ScreenRecorderProject1 (2).avi
  1. Load more activity
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up