Jump to content
GreenSock

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

Search the Community

Showing results for tags 'tweenlite'.

  • 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 right here is a code inside a function which gets called multiple times and responsible to animate multiple objects from its initial position to targeted position(object and position changes after every iteration). //Also a progress bar is implemented which is responsible to show the progress of the animation. this.tween = new TimelineMax({ onUpdate: showProgress.bind(this)}); this.tween.to(from, { duration: 10, x: to.x, y: to.y, z: to.z ,});
  2. #updating gsap from 2.1.3 to latest version resolved the issue When I try to move an <g> element to desired position, it works as expected within react storybook component. However, when export to an app, it adds css transform which is not what I wanted. TweenLite.set(target, { css: { x: 264, y: 12, opacity: 1 } }); react storybook element; correct behavior <g class="abc" id="abcd" data-svg-origin="31
  3. I am trying to develop an infinite canvas animation which show cases a number of clickable images on it. On moving the cursor the images will move in the opposite direction, I tried this with div now, is it possible to use Canvas for an infinite scroll effect. Plugins used: TweenMax, TweenLinte, ScrollToPlugin, Draggable
  4. Hello, I'm doing something in React.js and I don't know why the scrollTo doesn't work. Basically what I'm trying to do is something similar to what Mikel did : https://codepen.io/e1668058/pen/XWbBGPz?editors=0010 but without the buttons. I'm just trying to figure out how to do it just with the mousescroll. just a little extra, I've also thought of adding an onStart and onComplete for the TweenMax so that when it starts I lock the mousewheel with : window.addEventListener("wheel", function(e){e.preventDefault();}, {passive: false} ); a
  5. To implement a smooth scroll I used TweenLite.set{.. within my code. Serving the project works fine without any errors. But as soon as I try to build the project using ng build, it throws following error: How so? import { TweenLite } from 'gsap'; ... TweenLite.set(this.scroller.target, { rotation: 0.01, force3D: true }); "dependencies": { "@angular/animations": "~8.1.2", "@angular/common": "~8.1.2", "@angular/compiler": "~8.1.2", "@angular/core": "~8.1.2", "@angular/fire": "^5.2.3", "@angular/forms": "~8.1.2", "@angular/p
  6. Hello! I've got a problem with the new gsap 3.0 library. I have a website which uses gsap 2 with member-only plugins ThrowPropsPlugin and ColorPropsPlugin. I'm trying to migrate to gsap 3 now, but I just found out that these plugins are no longer available in the library. Question #1: Can I use these old plugins with the new gsap 3? Question #2: Why JS is looking for TweenLite file if I'm not using it? I'm importing all js files as ES6 modules, like this: import { gsap, Draggable, ScrollToPlugin, DrawSVGPlugin } from "./gsap/all.js"; import { ColorP
  7. Hello GreenSockers, You guys are so awesome and thank you for providing this platform. Today, I saw this beautiful accordion animation https://uimovement.com/design/beaches-app/ and I want to create the same effect using GS. Is it possible to create this effect using in GS? Thanks in advance.
  8. I am working on a HTML application which runs in an embedded device. There is a GSAP animation using TweenLite. For performance improvement I would like to do some tweaks in the frame per second of the animation. For a smooth animation, I need a fps(40) and as soon as the animation is complete, I would like to change the fps to fps(0). TweenLite.to($(element), 0, { scale: 0.95, opacity: 0, onStart: function () { TweenLite.ticker.fps(40); }, onComplete: function () { $(element).css("transform", "none"); done(); TweenLite.ticker.fps(
  9. Hello, i'm trying to use the Themepunch slider. I installed gsap with npm and imported TweenLite with this command: import TweenLite from 'gsap/TweenLite' I also tried download the TweenLite.js file and import it as a normal component but i always get this error from themepunch: Module not found: Error: Can't resolve 'TweenLite' in '/home/mat/pyprojects/django_lanivendole/lanivendole/saleor/static/js/components/rs-plugin-5/js/source' @ ./saleor/static/js/components/rs-plugin-5/js/source/jquery.themepunch.tools.js Can anyone help me? Thank
  10. Hi there! I'm very new here. Sorry if I ask dumb questions. I'm trying to create a simple single web page displaying an animation that works exactly like the blue paper (not the white one) animation featured on this website (which is by the way a very beautiful and creative site). But without the text, images only. I'm not trying to rip this website off, the concept is gonna be completely different. I noticed the creator of this website used Tweenlite but for the moment I'm too unexperienced to build it on my own. Anyone here has got a similar Codepen (or whatever) I c
  11. Greetings Greensock community I have a "simple" question, which i cannot for the life of me figure out on my own. In Angular, i have several methods in my component, it could be "closeEverything()", normally i call such function with "this.closeEverything()". Now, when i try to call such method in a TweenLite.to onComplete callback, it says undefined function. So far so good. Greensock does not know anything about the Angular scope, and i reckon Angular does now know anything about the Greensock scope. Now from what i have read, i might be able to change the scop
  12. Hi! If I use multiple times without a variable reference //var myVar = TweenLite.delayedCall(); TweenLite.delayedCall(); If I do not call the .kill(), it will increase my memory? Or the delayedCall() have an onComplete() Event to be able to kill() after the calling.? I use the delayedCall() in a loop multiple times with different parameters... Thanks a lot.
  13. hi guys, I created a checkout that slides in from the side of the page. It all makes sense if you go to https://www.shinbyeong.com/ scroll down a bit and click on 'pre-order' on the bottom. So the first time you open the slider it's a bit chucky, then after performing more times it get's better. I guess that's some cache right there. I added a will-change: transform; on the elements affected. But I didn't see any improvements. When I use chrome dev tools to record the performance I'm not sure how to analyse it. I don't see large chunks of delayed prop
  14. Dear GSAP users, I found a codepen that reproduces exactly what I wanted to do, having an element following my mouth with the GSAP smooth feeling. But I was wondering why that code wouldn't work with the tweenlite library but only with the tweenmax library? Thank you in advance for your time. I'm sorry if the question is stupid, but I'm confused because the code it's using "tweenlite" as a function.
  15. Hi, It's my first time using gsap with react(used a lot in as3), and I've a lot of questions if someone can show me an example o guide me in the right direction. I need to make a map like "google maps", the map it's a div with a background-image and inside svg with point. The issue I'm having it's if I drag the map the +/- buttons scale the map but in the wrong position, my idea it's if I scale up the the map then drag then scale down it should come back and animate to the starting position. Now I'm forcing to move to the starting position if the sca
  16. Unable to animate. Please help me with this.
  17. 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.
  18. <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?
  19. 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.
  20. 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
  21. 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
  22. Hi , Guys I am new , i am trying to stop tweenlite but css transformMax3d is still there, i am creating a slider like revolution slider editor but i am not able to get how i stop the tween in editor , inline style is still there so if you stop in middle of animation(See the attachment) , element will hang in middle of the page , i am using . clear() , kill() , also try killall but still css there , also try clear prop all but no luck please help me as soon as possible , i am also interested in split text purchase but , stuck in tween ?? please help me
  23. I'm working on a lightweight text slider for use on WordPress sites. The slider's context appears to be an issue: on some sites, contained within a widget, the animation works perfectly. On others, using a different WP theme, when the animation runs, the "slides" do slide, but instead of sliding out of view, they just slide to the far right side of the screen, underneath the other content. The "offscreen" slides remain partially visible under that content. I am pretty sure this is concerned with the distance the "slides" move, which I'll admit I don't fully understand. The basic co
  24. Hello... I have this simple record where I get SVG id's and manipulate with them: $(window).load(function() { var HSCPsvg = document.getElementById("hscp"); var svgDoc = HSCPsvg.contentDocument; var JinJang = svgDoc.getElementById("JinJang"); JinJang.onclick = function (){ TweenLite.to(JinJang, 6, { rotation:360, transformOrigin:"center", ease: Power0.easeNone, repeat:10, }); }; }); TweenLite works correctly, but for one click only. This method I usually use with jQuery and it works for each click. How to change it
  25. Hello all, I am newbie and just started to learn GSAP technology in my company. I have asked to create this effect using GSAP. I tried my best to find scrollTop of current message and fail to apply autoAlpha on it. Will you just check both images and can someone tell me how can I create fadein and fadeout effect scrolling up and down. I want to show current message with opacity 1 and last message with 0.5 and last second message 0.25 and so on. And when I scroll down messages opacity should change as per scroll. Please need someone early help to achieve this. Thanks in advance.
×