Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 10/18/2017 in all areas

  1. Hello @fredcorr and welcome to the GreenSock forum! Sorry your having an issue! When i look at the code being outputted i see SplitText applying the custom class you have on each line: Frame1lines1 Frame1lines2 So there is a way for you to target those lines for applying position to each line. I also see SplitText adding a separate <div> for each word within each of the <div> lines: Frame1lines1 and Frame1lines2. Try opening your browser inspector and you will see the <div>'s SplitText creates for lines and words. I looked at IE11 and did not see this issue. I presume you are on Windows 7? If you are viewing in IE10 i strongly recommend you update to IE11. Microsoft doesn't even support IE10 anymore. Last security update for IE10 was in January 2016. Unless I'm missing something here? Let's see if others are seeing what I'm seeing after SplitText splits your lines and words into usable markup?
    4 points
  2. The first element is not hitting the trigger on page load. If you want it to fire immediately, it needs to be beyond the triggerHook on page load. For different animations on each element, you can put those into an array and use the index of the jQuery each() loop to create the tween/timeline. Here's a fork that adds those options. Happy tweening.
    3 points
  3. You can do this rather simply with the following ... If you need something a little more complex and have an objection to ScrollMagic, you could look at the WayPoints jQuery plugin.
    3 points
  4. Yep, if you set the priority to 1 (or above), it should call that function BEFORE the engine updates all the tween values because the internal ticker has a priority of 0. Enjoy!
    2 points
  5. Yup, PointC is exactly right. Those functions were just creating timelines instantly. your myTimeline has no idea what your external functions are doing when you call them. As he said, you need the timelines those functions create to be returned and added to myTImeline. Once you wrap your head around that concept (which can be difficult at first) you'll really appreciate the conveniences that this technique yields. Definitely watch BOTH videos in this article we just put up on CSS-Tricks as it explains in details how to create functions that return timelines and the many benefits. The first video features an an animation designed and built by a real pro who is also quite the gentleman https://css-tricks.com/writing-smarter-animation-code/
    2 points
  6. I was just about to post something similar to what Sir @Jonathan did. All looks fine to me in IE11. It has been almost two years since MS has updated IE10 so I would also recommend letting that browser fade into history. Happy tweenng.
    2 points
  7. Hi @DD77 Welcome to the forum. As @Shaun Gorneau mentioned, you'd want to set the reverse property to false if you only want to trigger the element once. I also noticed you have a transition in your CSS. That's going to cause a fight for control between GSAP and CSS. You're also using a really old version of ScrollMagic. Here's a fork of your pen with the latest version and using the addIndicators and GSAP plugins. Hopefully that helps. Happy tweening.
    2 points
  8. If you would like an/each element to be triggered only once, you should set the ScrollMagic Scene's reverse property to false.
    2 points
  9. Well, this was just a little guidance. You can simply do the same thing for each element that needs to trigger a timeline. And, if you are going to be triggering many items (more than 5, I would say) I would defintely reconsider your position on ScrollMagic.
    2 points
  10. Hello @RuizBox and welcome to the GreenSock forum! Here is a link to the DrawSVG Docs so you have a reference on what is required to use DrawSVG https://greensock.com/docs/Plugins/DrawSVGPlugin DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse> and you can even animate outward from the center of the stroke (or any position/segment). It does this by controlling the stroke-dashoffset and stroke-dasharray CSS properties. Hopefully this helps! Happy Tweening
    2 points
  11. Great job, @Dipscom May the thunder roar loudly on you today and rain many points of the brownie!
    2 points
  12. Right. The gif you uploaded made a world of difference. I have my CodePen in a different layout than yours (with the code on the left, rather than on top) and copying your layout enabled me to replicate the error you are reporting. I have never used SVG.js (although I do a fair bit of SVG myself) so, I haven't got much insight, you will have to help me to help you. The issue stems from the fact that you are modifying the width of the 'line' based on the 'x' of your 'point_dr'. At some point, for some reason, one manages to drive that number into the negative, which causes SVG.js to throw an error. I don't feel you have the best setup by changing the width but it appears to me that you can stop the SVG.js error by simply doing a Math.abs() before you assign it to the 'x'. var x = Math.abs(point_dr.x); Since you're using draggable, you will have access to a lot of information if you look into the 'this' object inside your mySlider() - In your case 'this' will be the actual Draggable object, it probably will be safer to track how much the mouse has moved (deltaX), subtract that from the width of your line making sure that if you get a number that's less than zero to make the end value equals to zero. Something along the lines of: var x = line.width() - this.deltaX; if(x <= 0) { x = 0 } Hope that helps! ps: Shooooo @Carl! I'm trying to earn some brownie points here! Don't steal my thunder...
    2 points
  13. Hi @21cm, Welcome to the forums! I can't replicate your error. Maybe if you set the edgeResistance to 1 will stop it from happening?
    2 points
  14. The plugin hijacks most animate() calls but there are a few function calls that it doesn't intercept like show(), hide(), and toggle() because of some legacy issues with jQuery and some special ways it likes to handle things. I'd say that the jQuery plugin is a great drop-in to get good bang for your buck (very little time/effort), but I'd strongly recommend shifting to GSAP's regular API when you can. I think you'll find it much more flexible.
    1 point
  15. Good grief!! Shame on me. How did I not link to that awesome new CSS Tricks article and videos? I shall now go sit in the corner and think about what I've done. (or rather, didn't do)
    1 point
  16. Hi @karpec When you create a timeline in a function like that, you'd want to return it to the function and then add() it to your master like this: myTimeline.add( down() ); You need those parentheses in the add method. The way you have it now, all the functions are just firing right away so nothing is chaining the way you want it. Here's a basic example of returning timelines to functions and then adding to a master: See how all the functions return the timeline? This demo also shows how you can use the position parameter when adding them to the master. If you have additional questions, a CodePen demo is the way to get the best answers. Here's some info about that: Hopefully this helps a bit. Happy tweening.
    1 point
  17. Obrigado @ Carl , mais acredito que o @ Sahil , está perto do resultado que eu preciso. Por usar uma Linha do tempo, posso atribuir várias animações em slide atual. (Thanks Sahil) Exemplo: Quando o slide 2 está ativo, inserindo um texto animado ----- Thanks @Carl, but I believe @Sahil is closer to the result I am after. Using a timeline I can add several animations in the current slide. (Thanks Sahil) Example: When slide 2 is active, inserting an animated text
    1 point
  18. Following is the one way you can do it. @Carl The first pen by Blake, it is still incomplete. He had created to answer my question but it behaves odd on resize and I wasn't able to fix it either. Just letting you know.
    1 point
  19. o.k. - if the timeline is repeating, we just need to change from setting the time() with the scrubber to setting totalTime(). That would then include repeats and delays whereas time() does not. Here's a fork of your pen in which I commented out the loops timeline and just used the repeating redBall timeline controlled with the scrubber and based on the time of mainTL. Does that help? Happy tweening.
    1 point
  20. Hi @RenHe, Welcome to the forums! The link you have in the GIF url is pointing back to this post, I had to copy and paste it to be able to see what you are referring to. I am a bit lost here on what help you are looking for. What do you mean when you say 'unsure how to approach the special effect'. Have you got a mock of what you are trying to achieve? We will be more than happy to help as much as possible.
    1 point
  21. You had missing parentheses on line 35. hoverTwoTL.reversed() ? hoverTwoTL.play() : hoverTwoTL.reverse();
    1 point
  22. Hi @spacewindow When you add an infinitely repeating nested timeline to your master, your master will now infinitely repeat. If it were me, I'd leave the red ball timeline on its own and set its time based on the time of the master as you scrub it. Something like this: Does that help at all? Happy tweening.
    1 point
  23. You're most welcome. That's the GreenSock experience. Thank you for supporting GreenSock with your Club membership. Please let us know if you have additional GSAP questions. Happy tweening.
    1 point
  24. Hi @RuizBox Welcome to the forum and thank you for joining Club GreenSock. @Sahil is exactly right, drawSVG only works with strokes. The problem you'll encounter with your design is the gradients in the stroke of your logo. There are ways around this and we've had some discussions about animating gradients in strokes, but I think there's a much easier approach for you. If it were me, I'd add a mask over the top of the logo and use drawSVG to animate the mask and reveal the logo. Like this: If you have additional questions, a CodePen demo is the best way to get answers as we can easily edit your code to find a solution for you. Here's some info about that. Hopefully this helps with your project. Happy tweening and welcome aboard.
    1 point
  25. http://www.bannerhost.hu/nestea/Nestea_Erdei_640x360_01c_SIZMEK/ Smooth scaling (I hope), reused assets. Café Next http://www.bannerhost.hu/fressnapf/Fressnapf_Marcius_640x360_ADVERTICUM_03/ It was hard to implement, don't look at the code, it's ugly Inframe http://www.bannerhost.hu/cola/tasteII/Cola_TasteTheFeeling_II_640x360_DOUBLECLICK/ A simple particle engine. Café Next http://www.bannerhost.hu/toyota/tcm/TCM_Tactical_JANUARY_topky_anim_300x600_SK_02/ A little wheel and chassis work. Saatchi & Saatchi They are all DOM/GSAP based.
    1 point
  26. Hi, Oliver! Our team has a bit complicated flow: 1. idea, based on targeted audience 2. draft storyboard + interactive description 3. final storyboard design + copywrites 4. animation & programming (3-5 days) 5. QA 6. resizes design 7. resizes animation & adaptations (20 resizes only for Google Adwords) 8. resizes QA 9. texts localization (35 languages) 10. all banner resizes localization (20 * 35 = 700 banners in one set only for Google) 11. banner localizations proofreading Most of these processes are doing simultaneously with different teams. Banner localizations are automated with self-written tool (adobe air). We prefer pure canvas + JS + TweenMax because of great banner weight control, great cross-browser capabilities and good performance.
    1 point
×
×
  • Create New...