Jump to content
Search Community

Search the Community

Showing results for tags 'smoothing'.

  • 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

Found 4 results

  1. please I need too know why my animation is not smooth const boxType = document.querySelectorAll('.animated-element'); boxType.forEach((box, i) => { gsap.fromTo( box, { scrollTrigger: { trigger: box, start: 'bottom -100%', end: 'bottom 50%', scrub: true, markers: false, }, y: -20, transformOrigin: 'top', ease: 'power4.out', opacity: 0.3, stagger: 0.1, // Adjusted stagger value duration: 0.5, // Adjusted duration }, { scrollTrigger: { trigger: box, start: 'top 30%', end: 'bottom 50%', scrub: true, markers: false, }, ease: 'power4.out', y: 0, transformOrigin: 'top', opacity: 1, stagger: 0.1, // Adjusted stagger value } ); }); <ul class="mt-4 flex flex-col"> <li class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center " > <span class="inline-flex items-center gap-4" > <span class="" ><svg class="w-6" viewBox="0 0 23 5" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 2.5H21" stroke="black" stroke-width="4" stroke-linecap="round" /> </svg> </span> </span><span class="text-md inline-flex ml-4" >Engage your global audiences</span > </li> <li class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center " > <span class="inline-flex items-center gap-4" > <span class="" ><svg class="w-6" viewBox="0 0 23 5" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 2.5H21" stroke="black" stroke-width="4" stroke-linecap="round" /> </svg> </span> </span><span class="text-md inline-flex ml-4" >Establish your brand</span > </li> <li class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center " > <span class="inline-flex items-center gap-4" > <span class="" ><svg class="w-6" viewBox="0 0 23 5" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 2.5H21" stroke="black" stroke-width="4" stroke-linecap="round" /> </svg> </span> </span><span class="text-md inline-flex ml-4" >Achieve your corporate purpose goals</span > </li> <li class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center " > <span class="inline-flex items-center gap-4" > <span class="" ><svg class="w-6" viewBox="0 0 23 5" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 2.5H21" stroke="black" stroke-width="4" stroke-linecap="round" /> </svg> </span> </span><span class="text-md inline-flex ml-4" >Connect with your employees</span > </li> <li class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center " > <span class="inline-flex items-center gap-4" > <span class="" ><svg class="w-6" viewBox="0 0 23 5" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 2.5H21" stroke="black" stroke-width="4" stroke-linecap="round" /> </svg> </span> </span><span class="text-md inline-flex ml-4" >Inform and influence your stakeholders</span > </li> </ul>
  2. Hi I recently joined and have read some very helpful posts and have got an audio file playing in synchronization with a timeline. What I need specifically is audio with a scrub bar being synchronized with a series of animations which have their own scrub bar. In the code I have put together I have the audio playing and the animations running for the duration of the sound file and I have a scrub bar for the audio and animation which are synchronized together. The problem I have is that the animations are not moving smoothly but are shaking back and forth. I think this is to do with the rate at which they are being updated and I believe things can be improved by using the TweenLite.ticker or the TweenMax.ticker but I am not sure of the best way to implement them. Can you help me to smooth out the movement of these animations. The codepen is here: http://codepen.io/anon/pen/GjWJKA Many Thanks Pebble
  3. Hi, I read some topics where people WANT the smoothing applied by modern browsers, if you rotate or zoom images for instance. That is NOT what I search for. In my example there are three spans with border. Two of them are being rotated and get new top/left positions, and even if their final rotation is 90 degrees, they become smoothed. How can i DISABLE this somehow? I was really searching a long time, and all I assume is that this is browser rendering dependent, but maybe I can get a hint here. Btw: When I reverse that animation back from picture 2 to picture 1, they are crisp again. Thanks!
  4. Hi Guys, I am loading a few flv's using VideoLoader and LoaderMax queue. My video is 720x406 and I am stretching it to fit in 1000x564. VideoLoader's API says that smooting on videos is turned on by default and I have tried setting it to true as well. Problem is that when I test the sfw in flash, smoothing works but when I run this file in browser or on it own, no smoothing is applied. I have also tried this: intro.rawContent.smoothing = true; Appreciate if anyone can point out what might be happening. Thanks, ak
×
×
  • Create New...