Search the Community

Showing results for tags 'tweenmax'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Categories

  • HTML5 / JS
    • Public
    • "Simply Green" Package
    • "Shockingly Green" Package
    • "Business Green" Package
  • Flash
    • AS3
    • AS2

Found 541 results

  1. Inverted Rotation for 2 seconds

    Hi, I'm new in this world. I would have to recreate this animation: a div rotates to the right to infinity with a determined speed ... then at the click on a button the rotation is reversed also changing speed for a few seconds and then return to normal animation .... I hope I explained myself .. can anyone help me?
  2. Creating animatable page transitions

    Hi everyone, this is more of an ask-for-help and guidance rather than actually coding help, but I came across a very nice website page transition, which include its website logo transitioning between 2 pages. I was wondering if its possible to apply with GSAP? Here's the animation I am referring to: https://cl.ly/rXmT It would be great if someone could forward me to somewhere where I can learn to replicate the aforementioned effect. Thanks!
  3. I'm experimenting with tweenmax. What I would like to do is: 1. When the mouse passes on a text, you start to see the box where the video is. 2. When the mouse leaves the text, the video resets and hides itself. 3. The procedure is repeated.
  4. TimelineMax Scrollbar Progress Offset

    Hi All, Hoping someone can help with this issue I'm facing. I am controlling the TimelineMax progress based on scroll position. Pretty simple, however I noticed that my tweens are running for the entire length of the page. This is because I am currently calculating the percentage with age-old `window.scrollY / (document.body.clientHeight - window.innerHeight)` What I need help with, is figuring out how to start & finish the animation when the `.tweener` div in my Codepen example enters the viewport, to when it reaches the bottom of the viewport. I also don't want to use the behemoth that is ScrollMagic Any help would be greatly appreciated! Cheers
  5. Hello, I am novice, but i really impressed with this. I want to make product detail page having animations like this website: https://www.etq-amsterdam.com/store/product/men/low-3-timber/ When you click on product image, it will zoom it to full screen having pan effect. Also, when you scroll it, image will scale accordingly. I think they are using tweenmax, but i didn't able to crack it. Could you please help me with this? Thanks, Keyur
  6. DrawSVG - Animation of fill

    Hi, I wanted to create similar animation like on this website http://thieb.co/ when you must click and hold to enter. With this svg file. But with drawSVG plugin i can't animate fill. I searched just any solution but it has not helped me. Thank you for answer.
  7. PixiPlugin Color

    Hi All, I've been learning PixiJS, and I love it, but for some reason my ParticleContainer color is not changing?. All I'm getting is black, please let me know your thoughts I've pasted my code below for reference. var tlColor = new TimelineMax({ yoyo: true, repeat: 999, repeatDelay: 0 }); tlColor.to(particleContainer, 3, {pixi:{tint:0x6fbb4c}, ease: Cubic.easeOut }) .to(particleContainer, 3, {pixi:{tint:0x4ec7f2}, ease: Cubic.easeOut }) .to(particleContainer, 3, {pixi:{tint:0xe6df36}, ease: Cubic.easeOut }) .to(particleContainer, 3, {pixi:{tint:0x4c9f91}, ease: Cubic.easeOut }) .to(particleContainer, 3, {pixi:{tint:0xf98331}, ease: Cubic.easeOut }) .to(particleContainer, 3, {pixi:{tint:0xde1272}, ease: Cubic.easeOut }); Thanks
  8. How to update a Tween on window resizing

    Hello there, I'm new in Tweening... Does someone here know how to update Tween settings on window resizing when Tween progress is > 0 ??? I created an horizontal slider with ScrollMagic and Tweenmax and I tried to update dimensions and Tween settings on resize but even if I kill Tween, reset and refresh Scene it only works when Tween progress is 0... Thanks for your help ! Alex
  9. how to apply repeat to "staggerTo"

    <script type="text/javascript"> var t1 = new TimelineLite(); t1.staggerTo(".box", 0.1, {rotation:360, y:750}, 0.11); </script> hi I want to make non-stop motion so i added like this: t1.staggerTo(".box", 0.1, {rotation:360, y:750}, 0.11 ,repeat:-1); and it won't run. how can i solved this?
  10. Hey people! I'm working with a TimelineMax timeline. I want to run an animation first. After the first animation I want to resolve a promise. Then later in a separate function I want to reverse this timeline animation After this animation I want to resolve a different promise. I'm not sure how to do this. Any advice?
  11. Background Slider and draggable

    Hello, I tried create background slider where slides are stretched on window height and width. Snaps work good because i tried something similar but only in smaller dimensions. I think the problem is in the distance. Which must drag the element so that the slider changes its position to the next snap. I searched solution how can i decrease this distance. But i didn't find something. Thank you for answer.
  12. Hello, I am actually trying to achieve this animation effect using GSAP. https://tympanus.net/Development/ImageTransitions/index6.html In "other" option select example 4 so you can see what i'm trying to achieve. They have used css3 keyframe for this effect but i would like to make it using GSAP. Only thing is, each button has assigned one image in sequence.When I click on button 1, first image should be visible in image-wrapper with similar animation. Clicking on button2 replace image-2 and so on. Could someone help me with this. Thanks in advance.
  13. how to repeat this kind of callbacks based animation, I cant repeat this entire animation, each tween start based on callback please answer this problem TweenMax.to(".div1",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){ TweenMax.to(".div2",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){ TweenMax.to(".div3",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){ TweenMax.to(".div4",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){}}); }}); }}); }});
  14. Hi, i'm building a demo for a card game and i got it working thanks to the amazing hints of the experts in this forum. I think i developed the hardest pieces and now i want to play with the timeline to make some animation happen at the same time. I already watched the good tuts and read the documentation about timelines but something goes wrong with this specific case. Please have a look here https://codesandbox.io/s/0v6p9z27n In the animation.js file at line 103 you have the animation that is fired when you press DEAL. The animation consists of 4 parts (line 113-116), if i put a label to the last two animation (to make them run at the same time) it stops working. Can you please help me with this issue? Thanks!
  15. Hello! I am trying to build like a wave animation but using multiple elements, in the pen I left, there are 6 levels with some circles in each level. The current animation behavior is... each level of elements starts right after the previous one finish but the behavior I want to achieve it's like a fluid wave, so when the first level it's like at 50% of it's animation, the next level should starts and the same for the next levels, so a complete wave will be visible in the timeline and of course when the last level finish, the wave will start again. Can you help me with that please?
  16. I've created an animated landing page for my portfolio using GSAP and ScrollMagic.js, but it's pretty resource intensive and I know my code isn't the most efficient. How can I modify the code to create a smoother and more robust animation? And how can my JavaScript be condensed and more efficiently written to avoid repetition? function pageScroll(e) { var clicked = e.currentTarget.id; if (clicked == "navWelcome") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"header"}, delay:0.3}); }else if (clicked == "arrow") { TweenMax.to(window, 3.5, {scrollTo:{y:"#aboutMeFull"}}); }else if (clicked == "navAbout") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#aboutMeFull"}, delay:0.3}); }else if (clicked == "navServices") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#servicesConBg"}, delay:0.4}); }else if (clicked == "navPortfolio") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#portfolio"}, delay:0.3}); }else if (clicked == "portfolioBut") { TweenMax.to(window, 0.8, {scrollTo:{y:"#portfolio"}}); }else if (clicked == "navContact") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#contact"}, delay:0.3}); } } for (var i=0; i<navBut.length; i++) { navBut[i].addEventListener('click', pageScroll, false); } for (var i=0; i<navItem.length; i++) { navItem[i].addEventListener('click', pageScroll, false); } document.querySelector('#arrow').addEventListener('click', pageScroll, false); //Landing Page $(function() { var xTo = 1.15*window.innerWidth; var yTo = 0.5*window.innerHeight; var rocketTween = new TimelineMax().add([ TweenMax.from("#parallaxContainer #bg", 1, {backgroundPosition:"0 100%", ease: Linear.easeNone}), TweenMax.from("#parallaxContainer #starsSmall", 1, {backgroundPosition:"0 12%", ease: Linear.easeNone}), TweenMax.from("#parallaxContainer #starsLarge", 1, {backgroundPosition:"0 6%", ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #rocket", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #cloudsFront", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #cloudsBack", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #comet", 0.5, {x:-xTo, y:yTo, delay:0.5, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #logo", 0.8, {opacity:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #arrow", 0.07, {opacity:0}) ]);
  17. I have a GSAP animation working in a React component on codepen (thank you @rodrigo). Now I am trying to use it in my React project, but I get an error message saying, "'../../index' does not contain an export named 'TweenMax'." I'm guessing my strategy of placing the cdn links for TweenMax and MorphSVGPlugin in the public/index.html was not the correct way to add GSAP to the project. Do I have to download the source code and place it in the project or can I still use the CDN - and if so, where do I place the link? Thanks for any suggestions. Paul
  18. Animations are slow

    i am using gsap basic animation like translations and show or hide but the animation sometime do not go smoothly i don't know if i can post my demo website link but if anyone want to see the web i can comment on this post chars = mySplitText.chars; tl.staggerFrom(chars,0.01, {opacity:0, ease: Expo.easeInOut}, 0.11, "+=0.1"); tl.to(skip,1,{display: 'block',ease: Expo.easeIn},2); tl.to(bodycontent,1,{display:'block'},9); tl.to(textHolder,1,{display:'none',ease: Expo.easeIn},9); tl.to(txt,.1,{display:'none',ease: Expo.easeIn},9) tl.to(showafter, 2, {y:-7000,rotation:45,scale:4,ease: Expo.easeIn},9); tl.to(showafter1, 2, {y:7000,rotation:45,scale:4,ease: Expo.easeIn},9); tl.to(showafter, 2, {opacity:0,display:'none',ease: Expo.easeIn},10); tl.to(showafter1, 2, {opacity:0,display:'none',ease: Expo.easeIn},10); tl.to(body, 1, {overflowY:'auto',ease: Expo.easeIn},10); tl.to(welcome,2,{display: 'block',opacity:1,ease: Expo.easeIn},10); tl.to(bodycontent,2,{borderStyle:'solid',borderWidth: '48px',borderColor:'#fff',ease: Expo.easeIn},12); tl.to(bar,2,{display:'block',height:'48px',backgroundColor:'#fff',ease: Expo.easeIn},12); tl.to(bar2,2,{display:'block',width:'48px',backgroundColor:'#fff',ease: Expo.easeIn},12); tl.to(bar3,2,{display:'block',height:'48px',backgroundColor:'#fff',ease: Expo.easeIn},12); tl.to(social, 2, {opacity:1,ease: Expo.easeIn},12); tl.to(skip,1,{display: 'none',ease: Expo.easeIn},12); tl.to(welcome,1,{display: 'none',opacity:0,ease: Expo.easeIn},12); tl.to(cloud, 1, {x:-400,y:'15%',position:'fixed',ease: Expo.easeIn},12); tl.to(cloud, 1, {scale:0.75,ease: Expo.easeIn},12); tl.from(about, 2, {x:100,ease: Expo.easeIn},12); tl.to(about, 2, {opacity:1,ease: Expo.easeIn},12); tl.to(nav,2,{opacity:1,ease: Expo.easeIn},12); tl.from(nav,2,{x:100,ease: Expo.easeIn},12);
  19. TweenMax.staggerTo and pause

    Hi everyone, this isn't a question, just an observation! I was using TweenMax.staggerTo recently and was wondering why my tween was playing if I didn't pass paused: true, but if I did and then tried to use .play() I would get an error saying something like tween.play() is not a function. Turns out staggerTo creates an array of tweens, and arrays do indeed lack a .play() function. So if you plan on controlling the playback of a single staggerTo tween, you still should put it into a timeline Maybe this ought to be mentioned in the docs? Caused me quite the headache
  20. Hello Gsap'ers, Another post about the function so requested: Transition between pages using our beloved GSAP. But unlike the others, instead of questions, I am bringing some answers. I decided to make a Simple site template with SPA, which I believe will help everyone who is looking for solutions to these tools without having to use a framework. The activation of transitions is very simple: just click on the photos to go to the corresponding page. I hope it's useful. Ps¹: It is necessary to use the BarbaJS lib Ps²: Some settings are still missing and you can optimize the codes, best experience in Debbug Mode View Ps³: I'm using the translator hahaha https://codepen.io/Noturnoo/project/full/ZeYREp/
  21. Animating modals

    Hi all, I would like to replicate the App Store Featured App/Games animation. See this to see what it may look like: https://alfian.d.pr/B7ZbXP Basically, there will be 2 elements in which the styles would be the animated before modal is opened and a different styling after modal is opened. In the App Store case, its the image (increase width size) and the modal title (change x value position). In my Codepen, I would like to replicate such an animation but I have no clue to using the GSAP code to do this. I know I asked a similar question to which the answer was to use SPA (Single-Page Application), but for this case I think its possible to animate with modals. I am using this plugin for the full screen modal pop-up. Any ideas? Thanks, Alfian
  22. Animation plays first on website load

    Hi everyone, For my school's graduation showcase website, I have a DrawSVG element in which when completed, will perform an animation on other elements. You can view the code in main.js file here. The problem is on https://fmsstories.com, when loaded, there will be: 1. A slight blink of the original DrawSVG element 2. The elements that were supposed to be animated to view after DrawSVG element is completed drawing comes up first, and THEN disappearing and then appearing again after the animation is complete. This is especially apparent in mobile (i0S 11, Chrome, Safari). How do I fix the 2 problems? I have always thought it might be caching problem, but I have already tried to fix it using caching meta tags but the problem still persists. Is it a possibility on how I write the JS? (sorry, I'm still a newbie in JS!). Thanks, Alfian
  23. Dear Greensock community, i've been trying to make a analog clock, that uses animations from tweenmax. I saw this thread and decided to use parts of that code The clock works when refreshing the page continuously but the hole point of this clock is to just run by itself instead of having to refresh the page 1000 times. I tried to use a setinterval function but that breakes the animation. So in short: the clock as of now does not update, it stays static, only refreshing makes the analog pointers move. How do i make them move like a normal clock. Here's the code that i made using the thread/post above. $(document).ready(function() { var datetime = new Date(), h = datetime.getHours(), m = datetime.getMinutes(), s = datetime.getSeconds(); var myPointerH = $('.clockH'); var myPointerM = $('.clockM'); var myPointerS = $('.clockS'); var oneSecond = 60/60; // 1 second var oneHour = 60 * 60; //1 hour tween var twelveHours = 12 * 60 * 60; //12 hour tween var hourTween = TweenMax.to(myPointerH, twelveHours, {rotation:"360_cw", ease:Linear.easeNone,repeat:-1, paused:true}); var minuteTween = TweenMax.to(myPointerM, oneHour, {rotation: "360", ease:Linear.easeNone, repeat:-1, paused:true}); var secondsTween = TweenMax.to(myPointerS, oneSecond, {rotation: "360", ease:Linear.easeNone, repeat:-1, paused:true}); function showTime(){ minutesAsSeconds = m * 60; hoursAsSeconds = h * 60 * 60; secondsAsSeconds = s / 60; hourTween.progress(hoursAsSeconds / twelveHours); minuteTween.progress(minutesAsSeconds / oneHour); secondsTween.progress(secondsAsSeconds / oneSecond); console.log(hourTween, minuteTween, secondsTween); } showTime(); setInterval(function() { showTime(); }, 1000); }); Kind Regards, Hakiko
  24. Revealing a background

    I am trying to reveal the black background only after the two red and blue canvases have completed the animation. But as you can see there is "leak" and the black ground is visible during the rotation. Also I'm learning to control overflow and have found this link https://stackoverflow.com/questions/8837050/allow-specific-tag-to-override-overflowhidden , but theres something I'm doing wrong . Please Help.
  25. Smooth Repeat Vertical motion

    Hi, How do I animate this ball up and down smoothly. I'm using fromTo but i don't know where to put "repeat:-1"