Jump to content
Search Community

Search the Community

Showing results for tags 'ui'.

  • 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 10 results

  1. Hi everyone, I am working on a project where I want to create a blob effect using GSAP. I have animated two blob SVGs using GSAP as you can see in codepen attached below, but I am still learning, and I don’t know how to do everything. I have tried everything, mask-image, -webkit-mask-image but I'm not getting the result that I want. My goal is to mask an image into the blobs, like in the image I have attached. Can anyone please help me with this? How can I use GSAP to mask an image into the blobs? Thank you in advance for your help and suggestions.
  2. I have the following code <div class="scrollbar"> <main class="main-container"> <section class="section">1</section> <section class="section">2</section> <section class="section">3</section> <section class="section">4</section> </main> </div> <script src="https://unpkg.com/smooth-scrollbar@latest/dist/smooth-scrollbar.js"></script> .main-container { display: flex; position: relative; height: 100vh; } .section { background-color: #eae8e5; height: 100%; min-width: 100vw; } class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin { static pluginName = 'horizontalScroll'; transformDelta(delta, fromEvent) { if (!/wheel/.test(fromEvent.type)) { return delta; } const { x, y } = delta; return { y: 0, x: Math.abs(x) > Math.abs(y) ? x : y, }; } } Scrollbar.use(HorizontalScrollPlugin); const scrollbar = Scrollbar.init(document.querySelector('.scrollbar'), { damping: 0.1, delegateTo: document, alwaysShowTracks: true, }); Scrollbar.detachStyle(); I want it to be fixed on scroll when a block reaches a corner without preventing other blocks from scrolling as in this example https://codepen.io/akapowl/pen/abmpGQv/d076a9cf4c1a952a0bc921a76bc2202f Thanks in advance everyone
  3. Is this possible? I have a secondary set of buttons that appear for the top level nav buttons, I would like these secondary buttons to transition in, from right to left one after another like a quick cascade when the timeline stops on its containing frame. Using Animate's stacked layer tween process would be too cumbersome for the scalability of these apps, it would be great if a bit of code would trigger a transition-in animation procedurally. Is this something GS can do? Or would there be another JS library more suitable? Thanks.
  4. I'm using GSAP to create a problem solving game where the user drags coins in to bowls of a balance scale and weighing them by pressing a button. The user should be able to read some instructions before the game and some other instructions during the game. Different text elements should change when pressing the button for weighing. After 3 weighs the game should stop and user should somehow submit which coin he/she think is heavier or lighter than the rest. Maybe by dragging a coin to a "submit area" and somehow entering if it's heavier or lighter. Is this something that should be done with HTML, or can it as well be done within the SVG? In the latter case, is there a straight forward way of doing it with GSAP? Thanks!
  5. 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
  6. I adapt following Example from Chris Gannon grKnob3.html In DEMO-Mode it runs perfect. But I have Problem with the integration in my App for Home-Automation, IN your demos you start always from the body-tag. I use in my tests different tags. In the example (3rd attachment ) I used the "container" tag. I have it on my screen on the top position. The wheel run perfect. But not on the right position in the popup window (down-right). I want the Picture with a predefined size (240x240). Additional Questions: How I get a value from the wheel? Or how I put a Value to the wheel? Your predefined value "initialFace" don't work........ Hans ^^^
  7. I just finished creating 2 minutes animation with ~80 objects. I spend more time then i would we spend in after effects or photoshop, but i can make edits 10 times faster, then in Adobe programs. I already asked about UI and got an answer that Greensock using tweenui.com behind the scene (or vise versa). (I can't use this tool, because it's same "Adobe layers timeline system" that i am trying to get rid of using greensock.) One of the most time consuming thing was in the end - adding new object to my scene. 1. I create div element with a path to image source and id 2. I create var shortcut image_name = $("#image_name") (just realized this is not necessarry) 3. I set object to opacity:0 and showing it when it's time My question is - what technologies i can use to make this step easier? I think i should create json array and parser for it. And add image to json dynamicly. And create new array for this image that will have greensock .set function ... okay, my brain just pooped at that point. Can you give me a hint of what should i use? Thank you forum.
  8. one2gov

    ui for greensock

    Is there any posibility or plugins to make animation with user interface and not coding? For example on this page http://greensock.com/position-parameter i would like to move green timelineUI-tween on the timelines, to replace tweens among themselves. Is it possible? My goal is to replace After effects, because my task is to create easy animation for children, and in after effects even easy things takes hours.
  9. Is there a way to create reusable animations in GSAP similar to what Velocity.js does in the UI pack? This is a quick code example of how it works there: First, you set up a custom animation template: $.Velocity.RegisterEffect("callout.pulse", { defaultDuration: 900, calls: [ [ { scaleX: 1.1 }, 0.50 ], [ { scaleX: 1 }, 0.50 ] ] }); And then you use it in a simple call: $element.velocity("callout.pulse"); I'm trying to make some UI animations and keep them as DRY as possible. I have a couple of elements that start with visibility: "hidden" (I need them to keep position and not collapse on hiding) and I want to fade them in + slide them in/out from up/down (and use a type-in effect for others - I'll try the SplitText plugin for that). Since I'm using these calls from various sources I need them to always remember their original position even if the animation should be interrupted by quick switching of views. I cannot animate anything that would affect the document flow (margin, padding etc.) but I'm fine with "translateY". If I use "+=20px" type animations it's hard to keep track of position. Is there a best practice for such simple UI animations in GSAP? Thanks.
  10. Hi i wonder if anyone know how to create google meaningful transition by using GSAP. and also i want to know how to implement below effect on Javascript, jquery or angular way. if anyone know it would be great and much helpfull http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-visual-continuity http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B2wX4iIvu8L6aHVOOGxBOW5jZlE/animation-meaningfultransitions-visualcontinuity_music-tablet-01_xhdpi.webm and also i found this link http://material.cmiscm.com/ Jongmin Kim (@cmiscm). is the guy who made this amazing example. and these UI State change animation all done by using GSAP..i was amaze how smooth is it.. thats why i need to implement those type of effect on my own project. and also i want to know. is this can use for production project. and how the browser will handle. and how dom manipulation are handle, if anyone know know how to replicate that example. or any other way. please help me to understand this.
×
×
  • Create New...