Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 01/08/2019 in all areas

  1. Hi @Whitby and Welcome to the GreenSock Forum! To do this you need to have the to() tween in a for loop and use let instead of var so you can iterate DOM elements in the loop properly. function numberWithCommas(n) { var parts=n.toString().split("."); return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); } var endingCounterVar = [2100, 1000, 1500, 1800]; for (let i = 0; i <= 3; i++) { let counter = { var: 0 }; let tal = document.getElementById("tal-"+i); TweenMax.to(counter, 5, { var: endingCounterVar[i], onUpdate: function () { let nwc = numberWithCommas(counter.var); tal.innerHTML = nwc; }, ease:Circ.easeOut }); } Differences between using Javascript let vs var in the below codepen example (better to view on codepen with console to see output): Happy Tweening
    4 points
  2. Going to kick-off this years creative examples with a campaign I started last year and am still finishing this year! https://nfl-game-pass-banners.herokuapp.com/nfl-2018-high-impact-sku-fyt-generic-prototype/ https://nfl-game-pass-banners.herokuapp.com/nfl-2018-simple-sku-prototype/ https://nfl-game-pass-banners.herokuapp.com/nfl-2018-match-up-countdown-prototype/
    3 points
  3. Woohoo! It's working on my Chromium 45 platform!
    3 points
  4. Here is a collection of campaign work and a UI i built for previewing campaigns that is responsive. http://digital.bradleylancaster.com/index.html
    2 points
  5. Wow @Jonathan, thank you for such a fast reply! This works perfectly!
    2 points
  6. i got it, thank you so much . my issue have resloved
    2 points
  7. You need to run your backgroundColor function first to generate the array. backgroundColor: (function(){ var m = new Array(); for (var i = 0; i < 80; i++) { m.push("#"+ Math.floor((Math.random() * 10))+ Math.floor((Math.random() * 10))+Math.floor((Math.random() * 10))); // to construct a color arrary. } return m; })(),
    2 points
  8. I work mainly in and for elearning companies. Most used rapid elearning authoring tools used are Trivantis Lectora, Articulate Storyline and Adobe Captivate. All 3 deliver HTML5 as endoutput. But all 3 lack in their HTML. And all 3 lack in animation options in it. All have some possibilities, but none compared to GSAP, Spine or Pixi. You can however use Javascript in all 3 to some extent. As im familiar with GSAP, i already made quite some nice enhancements on exercises that were not possible in the elearning authoringtool itself. And allthough i can handle animations quite well in GSAP as is, fellow elearning developers are not as Javascript elaborate, thus i always watch for tools and combos that offer a somewhat easier approach to HTML5 animation. Thus Spine. I have not yet tried to implement Spine directly into my authoring set as Blake suggest. Might give that a try.. Have implemented GSAP and Pixi succesfully in courses, thus expanding animation options... but as said... my fellow developers cant handle it, so always on the watch for combos with UI-based tools. Will mockup some samples soon and add them as Codepen. kind regards, Math
    1 point
  9. Spine has it's own animation runtime, so GSAP probably won't be useful in that regards. But you can certainly animate the Spine display object itself using GSAP, like it's position, or trigger a spine animation using callbacks on timeline.
    1 point
  10. Thank you both @Carl and @Shaun Gorneau. After reading though documentation I had tried using "tweenTo" but didn't realize that was referencing the nested timeline versus master timeline - thanks for the guidance. I will make sure to include a CodePen with questions in the future. // TweenTo(10) = Tweening to time in "TimeLineOne", duration(3) = amount of time in "TimeLineMasterOne" .add(TimeLineOne.tweenTo(10).duration(3), 0)
    1 point
  11. I'm not quite sure I follow your question, but it looks like you've got some unnecessary code in there. Like you stop() and play() on the same tick (you can delete both of those lines as they cancel each other out). I also wonder if your issue is related to overwriting in some way, but it's very difficult to troubleshoot blind - could you provide a reduced test case in codepen just so we can see exactly what's going on? It doesn't have to be your real project - just something that shows the problem happening with as little code as possible. We'd love to help - it's just tough with a snippet of code that's not in context. And are you using the latest version of GSAP?
    1 point
  12. I can't speak to that browser specifically, but GSAP is pretty widely-known as being the most compatible option around for animation. Heck, we even put in a bunch of workarounds to make transforms work in IE6! That wasn't easy. If you run into any particular problems, let us know.
    1 point
×
×
  • Create New...