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
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 577 results

  1. Hector18

    Swiper Slider and Tweenmax Drag

    Hi, I'm trying to animate the drag for the swiper with tweenmax. Now the dragging option is to quick and jerky. Dees anyone know how to animate the drag option with tweenmax to have an easing accelerate effect? Here is an example with a slider who has the drag options with nice easing options: http://www.benmingo.com/ Thank you!
  2. Sameer Khan

    set Relative Animation End Point responsive

    Hi there i am new to Greensock and have created this animation with TweenMax and CustomWiggle , I wanted to ask you that I want the Ball from Logo to The Word Hello.( To the Dot of The Hello.) I Achieved it but the main problem is the position of the ball remain constant when i decrease Screensize , i want to ask How can i achieve this that take ball from logo and after Bounce ends , I want to make that ball goes into the Hello(Dot) and remain its position fixed with the Hello so when i move to the Smaller Screens i want to go the ball to that point ,.... Please Help i wwant it Responsive for All Devices so Help me. I Hope you Understand the Question Please find animation in above codepen link
  3. poohbear

    Small scaling font blurry

    Hello, When I try to scale with a small amount (between 1.0 and 1.09) the font really becomes blurry. I have tried looking for a solution, but none of them work. Examples: backface-visibility: hidden; transform: translateZ(0); -webkit-font-smoothing: subpixel-antialiased; -webkit-filter: blur(0); TweenMax.set('#button', {rotation:0.01, transformStyle:"preserve-3d"}); In my codepen you can see a example (viewed in Google Chrome).
  4. Hi everyone, I just learned to make animation website and join in greensock. I'm trying to learn to create a website using the exact same background effect as the one implemented on this website, http://thegigi.it/ in this website using a plus sign in the background and follow the direction of the mouse, I've asked in some forums and finally found the answer using tweenmax. Please guide me how can i achieve the same background effect? thankyou.
  5. I was trying to follow the video tutorial on this site: https://greensock.com/get-started-js I was stuck on the very first example he gave: `TweenMax.to(".logo", 2, {left:600});` I check the console and there was no error, so I was confuse. I thought i did something wrong on my side, but had no idea what. after some trial and error the 'x' property seem to work fine. Turns out for some reason the left property doesnt work with images. I tried doing it with a div box and the left property works as intended. Can someone explain why this is happening? Thanks
  6. Hi all, Looking for a hand or some advice if possible. I've created this codepen (below) and it works well enough when you drag the content horizontally but I would also like to be able to scroll with the mouse through the content, very much like the functionality of this website - https://antoni.de/cases/ I'm fairly new to Javascript and certainly GSAP, so any input is much appreciated. Thanks Jon
  7. Hi guys, I'm trying to do a fadein and fadeout effect on pinned sections using scrollmagic and gsap. However, i seem only to be able to do either a fadein effect or a fadeout effect only, what im trying to achieve is fading in and fading out as im scrolling and having the text still pinned while both effects applied. Here is a fiddle of what im having right now. Any help is very very much appreciated. NOTE: from the fiddle it might look like i can already achieve a fadein / fadeout effect from the 2nd section to 3rd section, where ACTUALLY the 3rd section just has a fadein effect.
  8. kosmo

    Help to pathDataToBezier

    Hi GSAP community! A huge thank you because thanks to you we can do something beautiful! For the needs of my future company that I am develloper I need to do a scroll action like this example> https://codepen.io/GreenSock/pen/GopRwQ I get there very well except that I wish 1. Have my line continue in draw svg until the end (scene with scrollmagic) 2. Stop the blue circle at a certain position while element 1 continues to end. (scene with scrollmagic too) I can not stop my tween blue... Can you help me ? thank you in advance
  9. Hi, I am new to the GreenSock forum and would greatly appreciate some insight and help. I have found some great posts with useful answers concerning 'Counters' however none with a separator. I apologise if I have missed one or if this post is in the wrong place. I'm trying to add a comma to the below code to give the 'thousands' a decimal place eg 2,100. var counter = { var: 0 }; var tal = document.getElementById("tal"); TweenMax.to(counter, 5, { var: 2100, onUpdate: function () { tal.innerHTML = Math.ceil(counter.var); }, ease:Circ.easeOut }); In the past I have used countUp.js to achieve this. But was wondering if TweenMax has a simple way to execute with out adding an additional js file. Any help would be appreciated. Thanks Barrett
  10. jingqi_fan

    TweenMax Variable Update on Scroll

    Hi guys, I'm a newbie in GSAP. I modified the GreenSock's ModifiersPlugin: Seamless Loop Codepen in the hopes of getting close to the effect as seen in this website (if you scroll down a bit to the selected clients section of the linked page, you will see that the marquee on the site can be sped up relative to your scroll speed). Here's my Codepen: https://codepen.io/jingqifan/pen/xmYxOR?editors=1111 I tried to do that by calling my tweenmax function in the Jquery on scroll function with the updated variable "move", but the animation is quite janky and doesn't feel as natural as the one seen in index.studio/about. The marquee animation also doesn't reset back to the original slower speed after you scroll. Any help is appreciated for getting the effect as close to the reference website as possible. Just a single marquee will do. Thank you so much!
  11. Hi I'm trying to replicated the transitions on this pages sections http://cuberto.com using TweenMax. var slides=document.querySelectorAll('.slide'); var tl=new TimelineLite({paused:true}); for(var i=slides.length;i--;){ var D=document.createElement('div'); D.className='Dot'; D.id='Dot'+i; D.addEventListener('click',function(){ tl.seek(this.id).pause() }); document.getElementById('Dots').appendChild(D); tl.add('Dot'+i) if(i>0){ if(i!=slides.length-1) { tl.addPause() } tl .set(slides[i-1].getElementsByClassName("sideDetails"), {width: "0"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {width:'50%'},{ width: "100%", ease: Power2.easeInOut}) .to(slides[i].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60", ease: Power2.easeInOut},0) .set(slides[i],{ background: "none"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {x: "0%"},{ x: "100%", ease: Power2.easeInOut}, .3) .to('#Dot'+i,.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i) .set(slides[i],{zIndex:1-i}) .set(slides[i-1],{zIndex:slides.length}) .to(slides[i-1].getElementsByClassName("sideDetails"), .3,{width: "50%",ease: Power2.easeInOut}, .6) .fromTo(slides[i-1].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60" }, {opacity: "1", y:"0",ease: Power2.easeInOut},.6) }; }; full code at codepen can be found here I'm basically trying to transition between a bunch of sliders with a swipe animation, I have alternated the element i would like to transition on each slide in black or pink so I can see the animation. I can seem to isolate the animation to the current slide - in essence I want the left hand div to grow to 100%, then animate off the page to the right, then switch to the next slider and animate the left hand dive to a width of 50% from an initial state of 0. I believe that is what the Cuberto site is doing. However I am getting in an awful mess with the scroll event firing an animation on all the slides. I'm not particularly competent with vanilla javascript but would like to attempt this with or without jQuery. I have tried pagepiling.js and fullpage.js but this doesn't achieve the effect I'm looking for. I could really do with a a resolution I can go to my client with, or at least a direction I could go in. Thanks javascript jquery horizontal-scrolling gsap pagepiling.js shareeditdeleteflag asked 4 mins ago DansBananaLoafcake 62 add a comment
  12. I ve implemented this codepen smoothScroll on my project, it works in all browsers except Firefox, any idea why it didn't work please? Thank you in advanced.
  13. Playing around ive manage almost get the desired effect im going for. simply: when one menu is opened, the other closes, vice versa. i'm not sure this is the best way of doing things (if you'll be so kind to look at the code in the codepen ive tried to comment to make it easier) the problems: when clicking quickly back and forth between the two buttons everything gets glitchy/janky. i'm very new to this library any pointers in the right direction are appreciated.
  14. Gubbels

    mouseover event

    Hey, I'm kind of struggling right now and I'm not quite sure what to do. I'm using simple divs as an example but I'm actually using an svg looking like this --> <svg version="1.1" id="martini" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve"> <g id="olive" class="oliveScale"> <line class="st0" x1="441.7" y1="187.6" x2="355.5" y2="322.2" /> <ellipse transform="matrix(0.5395 -0.842 0.842 0.5395 15.3108 456.2295)" class="st1" cx="424.7" cy="214.1" rx="14.2" ry="20.8" /> <path class="st2" d="M432.3,230.5c4.3-0.3,7.9-2,9.9-5.1c2-3.1,2.1-7.1,0.5-11.1L432.3,230.5z" /> <ellipse transform="matrix(0.5395 -0.842 0.842 0.5395 -13.7086 454.2149)" class="st1" cx="408.4" cy="239.6" rx="14.2" ry="20.8" /> <path class="st2" d="M416,256c4.3-0.3,7.9-2,9.9-5.1c2-3.1,2.1-7.1,0.5-11.1L416,256z" /> </g> <path id="stem" class="st3" d="M287.1,413.8c0,0,3.6-2.4,2.9,3.9c-0.7,6.3,3.6,188.5,3.6,188.5l-60.5,15.3c3.6,3.6,64.5,0,64.5,0 s53.9,3.2,63.3,0.6c0.5-0.1,0.4-0.8,0-0.9L302,606.2c-0.2-0.1-0.4-0.2-0.3-0.4c0.2-8.9,4.3-182,3.6-188.1c-0.6-5.2,1.8-4.5,2.6-4.1 L287.1,413.8z" /> <path id="gin" class="st4" d="M174.7,286.4c39.8,46.3,112.4,127.4,112.4,127.4l20.9-0.2c0.2,0.1,0.4,0,0.5-0.1 c4.6-5.1,73.7-82.4,112.1-127.2H174.7z" /> <path id="vermouth" class="st5" d="M420.6,286.4c15-17.5,25.3-30,25.3-31.4c0-4.8-4.4-6.3-5-6.5c0,0-0.1,0-0.1,0H154.4 c0,0-5.1,1.5-5.1,6.6c0,1.4,10.3,13.9,25.3,31.4H420.6z" /> </svg> As shown in the Codepen, I have a slider with two different divs in them, here's what I want to do. Once I hover over the div box that's NOT colored black, I want the black div box to move to the left and the other div to scale to ~1.3 and move to the right. I'd know how to target more than one element using querySelectorAll but how do I give different animations to the elements I'm targeting at once? Thanks in advance for the help and advice.
  15. Hello, I was trying to make a hover function with GSAP with timelinemax. In this, there are lists of elements which on hover will take up an x position and moves back to original position on mouse out. But, here, when I move the cursor in between lists items, the animation doesn't stop, but instead, it waits for the previous one to finish. Traditionally in jQuery, this is achieved through stop() method. What can we do here? and how do we do it? Thanks
  16. daafiejd

    Defining start situation

    Hi there, I'm very new to GSAP and JS in general, but I really love all the cool stuff that's capable off. Now I've created a tween and some functionality with it. It's all working, but not like I would want it to. For example: how do I define a starting situation from where the animation should take place. I know about the .from method, but when you look at my overlay, it would be in the way the whole time until you click the burger. When I code something hard in my in-line style or CSS like this: .overlay { right: 100%; } It doesn't work either. So I guess my question would be: how do I define a starting situation for a div that should slide on screen when a button is toggled on and slide off when the button is toggled off. My CSS could be off, my JS logic could be off... Tell me please, it would be greatly appreciated! Kind regards
  17. Hi y'all. I need some help here with my current project for university. Here's what I want to do: I created a slideshow for which I want to display animations (for example: scale on mouseover), however I want to show different types of animation based off on what slideshow page I am. Let's say I'm on slider 1 / 3 . Here I want the div box to scale:2 I'm on slider 2 / 3 . Here I want the div box to move x:200 I'm on slider 3 / 3 . Here I want the div box to opacity:0.2 The thing is I kind of know how to do it, using an if statement, but I'm not entirely sure what I have to put in between the brackets [if (HERE)] to target each slider. Thank you in advance for all the advice and help : )
  18. erayner_45092

    How to manipulate flex values?

    Hi there! I am just looking into ways to animate things without using position absolute and left and right properties. with flex I can center something in the middle of the page very easily. How would I go about animating something from right to center but not using position absolute? Cheers
  19. Hi, so I'm currently trying to make the dashed trail rotate around the globe clockwise. However I keep getting an error saying that the tl, or "trail" has not been defined even though it looks like it is. Any help is greatly appreciated, thanks.
  20. Hello! I'm trying to apply an animation to the same element in different time lines. But it works in jumps - without a smooth transition between the states of the element. I have a task to do animation with many elements inside one screen. I have several scenes that need to be run by scrolling or clicking on the menu. Under the link all works approximately, as it is necessary to me. One problem is that the animation does not go smoothly from the first state to the second state and then to the third. https://codepen.io/yuliarushay/pen/PBjeyN Thanks!
  21. craigib

    Add & Remove classname

    Hi Guys, I've built a quick codepen for reference but basically as you scroll down the page text fades in and also the background ( bigger text) image fades in. I've somewhat got it working but I need the active class to be removed on the background image when the next one fades in. At the minute the all just stack. Thanks
  22. Hi guys, So I've only done pretty basic stuff with GSAP at the minute but i've been set the task of building something similar to menu section on this link. http://www.johos.at The scroll timeline thing with changing background / text I just want to know if it's possible to build something similar using Scroll Magic and GSAP? I don't fancy investing a couple of days trying to do it to find out it's not possible.
  23. Hi, I am pretty new in GSAP and don't have a lot of exp. in react, so I am not 100% sure what is the main cause of this problem. Problem: I am trying to do a basic show/hide DOM element animation by clicking on buttons (one in parent App component, one inside of About section) and it works almost great. I would like that About section will be out of the viewport by default but after TweenMax.set(...) I still can see About section (I don't use CSS transform for default state). I saw examples and other topics on the forum but haven't found something like that so far. I also figured out that there is a workaround: put extra conditions in componentDidUpdate() method and replace all this.aboutSection refs by "id/data attribute/class name" (see code snippet). class App extends Component { constructor() { super(); this.state = { isOpenedAbout: false } } toggleAboutSection = () => { this.setState({isOpenedAbout: !this.state.isOpenedAbout}); }; render() { return ( <div> <About isOpenedAbout={this.state.isOpenedAbout} toggleAboutSection={this.toggleAboutSection} /> </div> ) } } class About extends Component { constructor() { super(); this.aboutSection = null; } componentDidMount() { console.log('this.aboutSection', this.aboutSection); // in the browser console: <section class="about text-c-mercury-light"> TweenMax.set(this.aboutSection, {xPercent: 100}); console.log('this.aboutSection', this.aboutSection); // in the browser console: <section class="about text-c-mercury-light" style="transform: translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0);"> } componentDidUpdate(prepProps) { if (this.props.isOpenedAbout && this.props.isOpenedAbout !== prepProps.isOpenedAbout) { TweenMax.to(this.aboutSection, .8, {xPercent: 0, ease: Power4.easeInOut}); } else if (!this.props.isOpenedAbout && this.props.isOpenedAbout !== prepProps.isOpenedAbout) { TweenMax.to(this.aboutSection, .8, {xPercent: 100, ease: Power4.easeInOut}); } else { // workaround: if use id/dataAttribute/class instead of ref // TweenMax.set(this.aboutSection, {xPercent: 100}); } } clickCloseButton = () => { this.props.toggleAboutSection(); }; render() { return ( <div> <section ref={node => (this.aboutSection = node)} className="about text-c-mercury-light"> ... </section> </div> ); } };
  24. alfianridwan

    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
  25. svyar

    Canvas animation in Vue.js

    There are 4 same sized pictures that's I have cut in 4 equal parts, the problem is I can't make them animate on hover. The part I have hovereda should become wider. I tried to make it this way - but this example doesn't work with reactive variables in Vue, I'd declared in object with coordinates.