Search the Community

Showing results for tags 'css'.



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 181 results

  1. Stagnax

    Invoking function on scrolling

    Hi, I was looking for animation on scrolling and i came across this So I played with it a little. I used scrollmagic to pin the layout during the duratoin of the box animation. So now i want to create similar animation timelines, with few changes. How do i put an individual timeline into a function and call it on scroll. Ive tried this syntax, but it doesnt seem to work : jQuery('.Screen').each(function () { var currentScreen = this; new ScrollMagic.Scene({ triggerElement: currentScreen, duration: 2000, offset: iScreenSize_H }) .on('start', function () { console.log(this.triggerElement().id); }).addTo(controller); }); Thank you .
  2. GreenHorny

    How Can I Achieve This Slide Effect?

    Hi, Anybody can help me achieve the slider effect this firm is using? antoni.de I am new to using greensock. Thank you in advance! GH
  3. In a project I'm doing, I need to match easing feel of elements animated using CSS cubic-Bezier timing function (example:cubic-bezier(0.1, 0.9, 0.2, 1) using tweenmax. Is this supported in GSAP ? I'm trying to avoid writing my own cubic-Bezier plugin if possible Thanks! Orry
  4. nmarketti

    Animating CSS Circles

    I'm laying out ideas on how to approach an animation that will happen in multiple places across an entire site. While I know I could use DrawSVG...the way I developed these circles for each section was specifically for ease of control of the various sizes across sections, viewports, etc...so I opted for a circle created with straight CSS rather than SVG. Can you do a similar draw effect with the circles on CSS properties, without having to use SVG and DrawSVG?
  5. imkopkap

    How to make Website like this?

    I try to copy this website to study and I found that my fonts are not smoothly. I would like to gain your suggestion how to make website like this. Thank you, Kopkap. http://www.carlsberg.com/170/
  6. 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.
  7. Mantvydas

    Radient Gradient Glow

    Hi guys, Sorry if this is not right question in this forum, but I hope you can help me. I need to achieve such nice gradient glow as in picture. I made this in photoshop and I tried to do same with CSS but I cant make it. With CSS you still can see edges of circle, I want it to fade 100%, like in picture. Also in picture center of the circle is more bright mine is all same. It is possible to make exactly same glow as in this picture? Or this is max what I can achieve with CSS? So maybe I can achieve this with GSAP? Thanks, Mantvydas
  8. Stagnax

    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.
  9. Stagnax

    Cursor follows the eyes

    Hi, Id like to know if there is a GSAP function that can create the effect of a mouse following the cursor
  10. Stagnax

    Perspective

    Hi, This is broad question. How can I create something like the pen i mentioned through GSAP. (A detailed explanation would be really helpful as I'm a noob) Thank you in advance.
  11. Stagnax

    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"
  12. Stagnax

    Draw svg

    Hello, I'm trying to use DrawSVG for the external border . As you can see I have 4 blocks that appear one by one . What I'd like to do is : As soon as the first block appears a border should start and complete its path as the last block appears I hope I'm clear what I want
  13. 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
  14. raizo

    Ink transition with gsap

    Hi guys, I want to know if its possible to achieve animation like this with morphSVG? (see the link below) https://giphy.com/gifs/3o6fJ1O72KpIh4YRLa. Im trying to wrap my head around how to achieve this and I liked to know how you guys would approach an effect like this.
  15. jnhltmn

    Centered Circular Draggable input

    I have a circular input with a width and height of 80vw/vh (depending on portrait or landscape).. GSAP Draggable uses the translate3d for the draggable component, but when I resize my window it doesn't center my #controller element anymore because of that.
  16. friendlygiraffe

    Animate width from left to right

    I'm trying to animate a div (mask) from left to right using width, keeping the text static. I have tried to achieve this using transformOrigin & marginLeft Any other suggestions welcome Thanks
  17. Hello I am able to scroll the div from right to left side but I have to display the div linearly when scrolling the mouse wheel.The current code is not displayed liner. I mean I have to display smoothly from right to left. TIll now I haven't used GSAP. Would you help me out in this? https://jsfiddle.net/Narendra2015/3s5su2q3/
  18. jSwtch

    Quick Beginner Question

    Hi, I am building a new site and plan to use GSAP to animate some svg in the future. My question is: if I am importing such a large and extensive library should I then use it for every animation on the site? Should I use GSAP over css for simple effects of the DOM.. like opacity on hover? I am more comfortable with the css, but I know I need to learn the GSAP anyway for my other ideas. SO the question is should I use GSAP for everything, or use a combination with css?
  19. Ahsan Jamal

    Screen Scaling and opacity animation

    I want to animate the home page of my website like this one : http://discoveroutpost.com/ I am using GSAP TweenMax function but unable to get the smooth animation like this. I am also trying the ScrollMagic Library for it but still no luck. Please guide how can I achieve this. Thanks in advance.
  20. friendlygiraffe

    staggerFrom same Point

    Is it possible to staggerFrom the same point on a relative positioned div? The Circles all start from 200px from their individual positions, whereas I'd prefer them to start at left:200px in absolute coordinates. Thanks
  21. Hi, As the title says, just before starting the tween the background colour flashes to white. Only on Firefox. I've tried to '.set' and also '.fromTo' to 'force' the starting colour of the background but no avail. Browser: Firefox 55.0.3 (64-bit) Os: OsX 10.11.6 Device: MacBook Pro (Retina, 13-inch, Early 2015) Thank you
  22. Ali Farooq

    Transfrom Rotate 360 Glitch

    Hi, I've encountered a small bug relating to the rotation property. As you can see in my codenpen I'm rotating a single Gear in the SVG. It is being animated to 360 degrees and is repeating indefinitely. The behavior is as expected except the fact that if you observe carefully, there is a slight jerk/glitch/delay whatever you call it, in the animation. It becomes more noticeable as we slow down the animation. I swear I saw a post regarding this bug on this forum some time ago but now I can't find that post that's why I'm asking again. Is there any way this can be fixed? Any help would be really appreciated. Many Thanks! Ali
  23. I got two issues when I want to use css "clip-path" and its attribute "inset". The first one is I can't make it work as animation, I want it to move to Clip-path:inset(50% 0px 0px) slowly, but it doesn't work. The second one is I can't use something like Clip-path:inset (-50% 0px 0px),I want to use minus parameter, but still not working How can I make these work with GSAP? Thanks
  24. Deanr1976

    className

    Anybody have an issue with className? I use className to add a class to stop the main page from scrolling when a window(modal) is in view. Sometimes it is removed on timeline reversal. Sometimes it doesn't remove. When it doesn't remove it leaves the main page un-scrollable. I've got 3 sites in production at the moment and this happens on all of them.
  25. Monstreur

    stylize scrollbar

    Hey guys, First of all, let me appologize for my bad english because i'm french. I have a problem with scrollmagic. Usually, i put th code below to customize my scrollbar with CSS. But when it's with scrollmagic, it has no effect. ::-webkit-scrollbar-track { background-color: #fff; } ::-webkit-scrollbar { width: 8px; background-color: #000; } ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #000; border-radius: 8px; border: 2px solid #fff; } Does a solution exist for this issue or i'm blocked with the default weird scrollbar ? you can see the result in this url : http://test.jdo-univers.eu