Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'Dynamic'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. this.menuTimeLine = gsap.timeline({ paused: true, }); this.menuTimeLine .fromTo(this.ref.menu, { x: "-100%", }, { x: "0%", duration: this.state.open ? 0.3 : 2, ease: this.state.open ? "linear" : "expo.out", }, 0).reverse() if (this.menuTimeLine.reversed()) { this.menuTimeLine.play() } else { this.menuTimeLine.reverse() } Button.addEventListener('click', () => { if (this.menuTimeLine.reversed()) { this.menuTimeLine.play(); } else { this.menuTimeLine.reverse() } }) Update Prop or Tween value conditionally whatever it is normal gsap or gsap timeline In Gsap version 2.x.x updateTo can update tweening values or gsap props but what to do in gsap 3.x.x or Gsap vars can help in this issue ? in Codepen example dynamic ease or duration ? besause timeline is outside of onClick ?
  2. Hi there, I want to create an animated wheel which starts at a specific degree and ends at a specific degree. Until it's requested to stop/pause it needs to spin infinite. So basically there are three stages "starting", "spinning", "stopping". The difficult task is to start and stop spinning with some momentum to feel natural. I have found multiple very helpful forum posts about that topic. They all stop at a random degree. Especially this seams to be a very similar problem but the solution is missing the momentum at start and stop position. Thanks in advance
  3. Hi All, I got stuck in gsap where Multiple tweens having different properties tweening at the same time. I can fix if the duration is hardcoded but if there is dynamic duration value what I am passing through variable in real app then it does not follow the timeline smoothly. I also tried positioning but in dynamic case, positioning was also not working. Therefore, I need help. I also have added codepen where I have given some hint about what I am trying to do. In the codepen, I am trying to animate rows on one side and image on other side should animate at the same time. image is fading away and row's background and color is changing depending on image but timelinemax has sequence whereas tweenmax is running at the same time. timelinemax waits untill one tween ends but i want one group of animations to start and end at the same time then move to another. So could someone please explain how can I achieve it. Thanks in advance! In Short: Multiple tweens with different properties animation at same time. one group of animations start and end at the same time.
  4. Hi everyone, Please i need to know if Dynamic (feed driven) Google DoubleClick banners can be hand coded and not created using Google Web Designer. If so does anyone have any base templates to start from. I hand code everything using GSAP and i just want to inject the data using Javascript and not be tied down to Google Web Designer. I am willing to pay for Live Online training for someone who can help me with this or even doing builds in Google Web Designer and adding custom code. Any help would be much appreciated. Thanks Brad
  5. GS Community, I am in the process of rebuilding a GSAP website into a Vue.js project. I am in the very early stages of learning Vue, here is a good, free, video series and here is a very good (but it cost 10 dollars) Udemy course. My hope for this thread is to build out a full GSAP & Vue App. I will break out each component as I go and place it in a codepen (I have quite a few things done already, it will take me some time to go back and break things out). This will be a work in progress and the codepens will be updated in phases: Phase 1: will be to get just get things wired the Vue way. Phase 2: will be to use GSAP for the animations and transitions etc. Phase 3: Build everything as dynamic/reusable components. If all goes well this will turn into a Vue/GSAP component library of sorts for everyone to reference. Blake, one of the GreenSock Moderators, has graciously offered to help guide me (Thank you Blake). Goals for the thread/project: Navigation Button Component Section Content Component Section Hero Image Component Section Thumbnail/Modal Button Component Modal Component Password Modal Component Vertical Slideshow Component (I will also to help others build out a Horizontal Version). Slide-up Tab Component Radial Button/Checkbox Form Filtering based on a sector/classname (with persistence via local storage or a Vue method, if it exists - learning as I go ) All of the above is built in a non-Vue way here http://hainis.net/dev/ Note: that only the print/advil, print/amex, print/bayer slideshow content is sorted, all the other thumbnails will load a blank modal. This site has performance issues and at times the javascript, loaded via a Djax call, for the thumbnail buttons to launch the slideshow content is not binding properly. These issues and some prodding by Blake have made me venture down the Vue.js path. Side note: I'm learning, not there yet, to do things a DRY way; hopefully under Blake's guidance I will finally get this under control and tighten up the spaghetti code that I currently have. Okay, so that's the setup. Next post will be some useful links and a current state/NOT simplified codepen of the current Vue app.
  6. Hi Folks, Am trying to determine if there is any way to use Draggable in conjunction with jQuery's .on() method, or to achieve a similar result, such that any dynamically created element of a given class under a parent object will inherit the Draggable configuration. jQuery doc -> http://api.jquery.com/on/ I saw a previous conversation thread that referenced an add-in called waitUntilExists which has this approximate effect, but only for a single names element at a time(plus looks like it may no longer work since jQuery 3...) Any thoughts would be appreciated!
  7. Hi there, love the GSAP library, but having a strange issue that I've never really had to address before. I wish to create elements dynamically on the page outside of the GSAP timeline, then within a created timeline, have the selector pick up whatever set of elements are currently matching the selector. The issue is the set appears to be 'cached' with repeat loops of the timeline. The codepen is similar to my code, but stripped down to just the basics of what's not working. In the last staggerTo, the elements are moved and then removed from the DOM. The onRepeat calls the same function to add new ones to the DOM, but repeat loops of the timeline don't evaluate the selector contents each time. As a side note, I was a little surprised that the onStart function didn't run before the rest of the constructed timeline, including the staggerTo's. I guess just a failure in how I comprehend the staggerTos are functioning, it's related to the same issue really, in that I need to be able to tell staggerTo, only evaluate the selector once you get to whichever part of the timeline. I did manage to get this working by using .add instead of the stagger, and inside there creating new timelines being passed the same selector and returning a set of tweens. These at least seem to be executed as the timeline 'reaches' them. Hope someone can provide some assistance or help me get my thinking straight about why this is expected behaviour and the correct method I should use to achieve what I'm after. Thanks!
  8. Hello, friends! I am working on Angular2 powered project and have some issue with tweening dynamic elements. Everything works fine alone, but if i do parallel animation of a couple elements - something brakes: inner text of tweened div is not updating until some user-event, like click/touch/mousewheel. The same for css transitioned elements, that dont used by any gsap tools. The problem is not stable on desktop (chrome/opera), as i think, it starts to bugging when i go to other tab, do something and go back to my tab. But it stable in iOs Safari 8.3/10.2. As for Angular side - i'm doing all along 'best practise': all targets are element refs all tweens are emitted after view init lifecycle hook and subscripiton on target (check that it is exist) At this moment all animations are by TweenMax. What can cause the problem?
  9. This might be kind of a shot in the dark, but has anyone had experience with creating dynamic banner ads in Adform?
  10. Let's say we have a tween animation already added to a TimelineMax instance. The Timeline is looping (infinite repeat) but while watching it loop I want the user to have the option to check out some other ease options. Is there a way to dynamically add/replace the ease values to an existing, running tween? Or would I need to completely replace what's there?
  11. Thought I'd share a couple of CodePen's that might help someone. I was charged with coming up with something that would allow a user to dynamically load an SVG into a container and then draw it using drawSVG. (Our organization got the Business Green membership so we wanted to get all the goodie we could get out of it!) As you know, not all SVGs are alike and we didn't have the convenience of being able to go into every SVG and add class names. So, first I needed something that would snag an svg file in an img tag and replace it with the inline version. I decided to use this (won't go into the process of doing that but it works): https://www.npmjs.com/package/inline-svg Then I needed a script that would parse through the lines, paths, etc to see what was there and draw the SVG. I wrote a really quick function that will do that and added a couple of bonus functions (center on the screen and shake) for good measure. Hope that helps someone who might have the same issues at least get started.
  12. I have used GSAP for a few years now, after being introduced to it through college. I am a big fan and want to use it for animating a sequence in my portfolio site. I am testing a simple concept to see if I can make a much more complex sequence What I am trying to do is change an image at a specific point in the Timeline sequence - essentially changing the "src" path of the image. I have spent an hour or two now scouring the forums and searching online for a solution, and the only seemingly related issues are much more complex. I am aware of the possibility of using jQuery and the "attr" , however ideally I would like to keep it as simple as possible, and believe there should be a way to simply change the source of the image as a 'src' css property. I have tried it without the CSS Plugin, as well as spelling out the word. I have also ran a check on the image source to make sure it isn't a file-path issue. Here is the code as of now: <body> <img src="images/7.gif" id="seven"> </body> <script> var seven = document.querySelector("#seven"); var tl = new TimelineMax({delay: 2, repeat: 2, repeatDelay: 2}); window.onload = function() { tl.from(seven, 0.5, {autoAlpha: 0.5, x: +100}) .to(seven, 0.1, {y: + 100, x: + 300}) .to(seven, 0.4, {css:{src: "images/7777777.png"}}); var pathSource = String(seven.src); console.log(pathSource); } </script>
  13. Hi there, long-time lurker, first-time poster. I have an obnoxiously complex set of dynamic banners (content pulled in through a feed) where there are dozens of different static elements that can be called depending on one of the variables passed into the feed. I'm using TimelineMax to animate them. There are 2 timelines running simultaneously: one with foreground content, and a background animation. The elements being tweened on each timeline are mutually exclusive and the timing doesn't relate. They should both start on load and play independently. The whole thing is MUCH more complex than this but I've simplified it down to the gist of the structure. Everything works perfectly ~8 times out of 10 while hosted on Doubleclick (Chrome, Firefox, Safari tested on Mac all similar results), and every time locally. It's just every once in a while the elements on the "animationTL" will suddenly revert back to opacity:0 after they've tweened in. The whole "mainTLready" and "animationTLready" thing is also a workaround for a different issue I was encountering. If I just let each timeline play immediately, sometimes, when hooked up to the dynamic feed, it would hang up and nothing would animate at all. So this seems to correct that problem, but I couldn't replicate the issue on my end so I'm not 100% sure. function init(){ graphicsAnimation(); //build mainTL: uses .to, .from, .staggerFrom, .add mainTLready=true; playBanner(); } function graphicsAnimation(){ //build animationTL (inside switch statement cases): .set, .from only. //Most of these animate x/y and opacity. ".set"s are declaring scale, top & left values. animationTLready=true; playBanner(); } function playBanner(){ if(mainTLready&&animationTLready){ document.getElementById('content').style.visibility = "visible"; mainTL.play(); animationTL.play(); } } TL;DR "from" tweened elements revert after tweening back to their pre-tween state. Works locally, breaks ~20% of the time loaded on Doubleclick with text and images pulled from dynamic feed. So um, any ideas? Let me know if you need more info. Thank you!
  14. Hi, Like you'll see in the codepen, my array of target is not updated. Is there a solution to do that ? Thank you guys Izigo
  15. Hi, I'm new to GSAP so my issue could (hopefully) be peanuts for you guys I want to loop a timeline and add 90 degrees to the variable rotation every time it runs. Can't get it to work, because TimelineMax keeps the original value of rotation. The variable does get updated though..
  16. Hi, Hope someone can help me with with this. I am trying to find a way to create a "wind effect / drift". A movie clip will be constantly be pushed back -x but clicking the stage will make it move forward +x the more you click the faster it moves. If the clicks stop it will slowly slowdown and start to drift backwards. Any support is much appreciated! Thx
  17. The Flash version used to have a plugin for Dynamic Props which allowed you to continuously update the properties. Is there something like that for the HTML version? Even being able to simply call TweenMax.updateTo(targetObject,.5,{property:newPropertyValue}); would be awesome... The problem is when it completes, you can't call updateTo again. Instead, you need to check to see if it is tweening and call updateTo() or if it stops call to(). It would be great if updateTo would simply create a new tween if it already finished.
  18. I am wondering if there is a way to tween essentially the same way as you would using the DynamicPropsPlugin in As3. something like this from your documentation but in javascript. TweenLite.to(myDiv, 3, {dynamicProps:{x:getMouseX, y:getMouseY}}); Secondly would it then be possible (without using a function like above) to reference a dynamic value of another element. I would want the Tween to update if "anotherdiv.width" changed during the course of the animation. Maybe the only solution is using whatever answer there is for my first question? TweenLite.to(div, 1.5, {width:anotherdiv.width}); thanks -ross
  19. Hey there guys! I've spent a good deal of time trying to figure this out - so now I've decided to ask a bit of help. When running and reversing timelines, the properties might change. Is there a way of updating these properties on the fly? I've come up with a small example, check out the codepen! Please let me know if you need me to clarify anything
  20. I have added dynamic text to my TransformManager, is it possible to change the size of dynamically added text ?
  21. Hi, I have a responsive HTML5 page which has specific areas which will zoom in locate a particular tween animation. Is there a way by which I can update the tween vars object [left, top] dynamically on run time? Thanks Abhilash
  22. Hi - I'm working on a new project to ramp up my AS3 skills. One thing I have is a MC with a dynamic text filed within. The text field has html copy along with styles provided via external CSS. The MC scrolls, then once it hits the onComplete there's a slight delay, autoAlpha:0 then another onComplete to fade it back in / reposition at 0,0. Everything works fine, however the copy, once the animation is reset has major aliasing issues. The image will show the before and after: when I kill the alpha and just have a normal scroll it looks fine. Frankly I'm baffled as to why the copy went coo coo for cocoa puffs - any help, advice or guidance would be appreciated! Not sure if this is a common bug or not. Thanks!
  23. I have a scrolling element (x axis) which I have applied draggable to. Everything is working fine when the page loads however when I append a new child element to it the scrolling element does not update its width which makes the element unscrollable. I have had a look at running update(), applyBounds() and even manually changing the padding right value but no bueno.
  24. Hello, I would like to start and reverse a timeline animation for the element that I'm hovering with the mouse. Then on mouseleave I would like to reverse this animation. I know I could create a timeline for each possible element. However is it also possible to tell the timeline which element should be effected with the animation by passing the element ID to the timeline? Something like this: <div id="navipoint-board"> <div class="navipoints"><a href="/control/category/~category_id=MANGO"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_mango.png" id="mango"></a></div> <div class="navipoints"><a href="/control/category/~category_id=ROTEFRUECHTE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_rotefruechte.png" id="rotefruechte"></a></div> <div class="navipoints"><a href="/control/category/~category_id=ERDBEERE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_erdbeere.png" id="erdbeere"></a></div> <div class="navipoints"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/active_vanille.png" id="vanille"></div> <div class="navipoints"><a href="/control/category/~category_id=HAFER"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_hafer.png" id="hafer"></a></div> <div class="navipoints"><a href="/control/category/~category_id=OLIVE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_olive.png" id="olive"></a></div> <div class="navipoints"><a href="/control/category/~category_id=PFIRSICH"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_pfirsich.png" id="pfirsich"></a></div> <div class="navipoints"><a href="/control/category/~category_id=KOKOS"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_kokos.png" id="kokos"></a></div> </div> <script type="text/javascript"> $(document).ready(function() { TweenMax.to($('.navipoints a img'), 0, {rotation:"20"}); var tlRotation = new TimelineMax({paused:true}); tlRotation.to("Mouseover-Element", 0.5, {rotation:"0"}); $('.navipoints a img').mouseenter(function() {tlRotation.play(this);}); $('.navipoints a img').mouseleave(function() {tlRotation.reverse(this);}); }); </script> Thank you very much, Robert
  25. http://jsfiddle.net/ccarterc1984/5t9EU/2/ First timeline seems to work great. It animates each box individually forward and backward. Upon completion of the reverse animation, I call a function which runs the second timeline. However the second timeline does not animate, it simply sets the properties instantly.
×