Jump to content
GreenSock

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

Search the Community

Showing results for tags 'throwprops'.

  • 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. Hi guys, I just want to contribute with my findings in case others ran into this. I had been struggling getting GSAP's Draggable to work with Next.js and have finally found a solution. Next.js does Server Side Rendering (SSR) so pages rendered on the server had issues loading the GSAP NPM modules. Please note that pages worked just fine client-side. ERROR: import TweenLite, { _gsScope, globals, EventDispatcher } from "./TweenLite.js"; ^^^^^^ SyntaxError: Unexpected token import To resolve the issue with GSAP not being transpiled, I installed next-plugin-tran
  2. Hi all, I'm trying to use the ThrowPropsPlugin together with the Draggable functionality in my VUEjs website. However every time I set the property "throwProps" to true I get this error: Uncaught ERROR: No velocity was defined in the throwProps tween of [object Object] property: x I know there are already other topics with the same subject opened but I've tried the solutions mentioned in there and nothing helped. Here's my code for reference. If anyone could help it would be much appreciated. Thanks! require('../libs/ThrowPropsPlugin'
  3. Hey guys, long time no see I'm getting back into GSAP and came across something that I think is a bug. I have a very basic container with substantial vertical padding that I'm trying to add `scrollTop` animation that uses GSAP's `throwProps` functionality. However, it seems to be breaking the scroll functionality, presumably due to the substantial vertical padding that I have. Note that you need to click/drag or touch/drag to have this behavior come into effect. Am I doing something wrong or is this a bug? P.S. How do I do inline code formatting in this edi
  4. I thought this was a pretty straightforward question, so I didn't make a demo. Lmk if it would help. Anyways, I'm wondering if there is any recommended way to simulate dragging a draggable with throwprops+snaps using two-finger scrolling on a laptop trackpad. I don't want gesture detection, but instead want to real time control of the draggable, just like how it would be if you were to drag on a mobile device. So far the only method I've thought of is to directly read the scroll event and use those values to create a throwprops tween and update the draggable at some poi
  5. Hello... how can get this overflow-x to scroll with a nice flick ? and be bound to the overflowed container ? Could flexbox be part of the problem ? I've forked one of Diaco's pens from another post. Thank you for the help!
  6. Hey there, I am trying to import the `ThrowProps` plugin from the bonus zip. In my file I need the plugin, I am importing this: import Draggable from 'gsap/Draggable' import '../assets/throwProps' then further down: componentDidMount() { const rotationSnap = 360 / 14 Draggable.create('#wheel', { type: 'rotation', throwProps: true, snap: (endValue) => Math.round(endValue / rotationSnap) * rotationSnap }) } The wheel turns on drag, but there is not snap or inertia. Running this just like this I get the fo
  7. Hey there forums! This is kind of more of a general javascript question than a greensock question, though it does involve greensock! I'm trying to build off of this codepen I found - My goal is essentially to create more boxes and targets and have certain boxes with a class of 'incorrect'. I'd like to check for when a box with the class of 'incorrect' is on a target with a Check Answers button that I've created. The difficulty I'm having is trying to add a class of "wrong" to the targets when a box with the class of "incorrect" is snapped onto a target. My theory is th
  8. Hello, I have a simple object I would like to 'throw' to simulate a scroll on a mobile device. While the object can be dragged, the throw simulation does not appear to be. Are their certain controls I am missing? Draggable.create("#square", { lockAxis:true, type:"y", onDrag:function( ){ }, throwProps:true }); //I am using these libraries: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/utils/Draggable.min.js"></script> <
  9. I'm using ThrowPropsPlugin with no success on webpack, I Import TweenMax as import { TweenMax } from 'gsap' and import Draggable from 'gsap/Draggable' They work good, however when I try to use ThrowProps, I import it from the common-js folder of ShockinglyGreen as import 'app/vendor/ThrowPropsPlugin'; No errors, but it won't work either. Any help is much appreciated, thanks!
  10. Hi all, I want to call a function while throwing. For dragging we have onDrag with OnDragParams. But is there something like onThrow? I want to detect current DIV on position while its getting thrown. Would be amazing! I hope for an answer / workaround to fix this. Working code (but without onThrow) : Draggable.create(PB[m_].el.contentDraggable, {type:"x", bounds: PB[m_].el.contentWrapper, edgeResistance:0.2, lockAxis:true, throwProps:true, onDragEnd:PB[c_].dragEnd, onDrag: PB[c_].whileDragging, onDragParams:[]});
  11. Hi there ! Starting to get some fun with GSAP ! I'm trying to create an infinite draggable gallery. For this, i started by creating an Isotope grid. Now i want to add the GSAP Draggable plugin but nothing is moving. Draggable creates an intermediate div in my Isotope grid and i think that's what actually break everything. Any idea to fix this ? Thanks for your help
  12. Hello! Based on the rotation property of the wheel, I'd like to change the HTML content based on the segment that it lands on. I've used the rotationSnap var but I'm unsure how to call it's value based on the end position to then alter the HTML. I'd also ideally like to set-up each segment as a separate div so I can then easily place content into them such as the title of the colour etc. I'm fairly new to GSAP (and js to some extent) so I would like a bit of guidance on how achieve this. Many thanks!
  13. What I'm going for: When an element reaches the edge of it's boundary box, it re-positions itself at the other edge of it's boundary box. If thrown, it will maintain velocity. I'm using .set and it's removing velocity. I saw on another thread that there's a way to access velocity but I'm not sure how to keep it when re-positioning the element, or even if I'm thinking about it in the most performant way. https://greensock.com/forums/topic/8198-end-position-with-draggable-and-throwprops/ Thanks!
  14. I'm trying to make a looping Draggable that snaps and only moves one step at a time. The problem is that with throwProps switched on, the user can throw it more than one 'step' at a time, and with throwProps switched off it doesn't snap at all. I used this pen as a starting point: http://codepen.io/osublake/pen/ee107aeb54bdf4dca1084715d86b5e9c Here's where I've gotten to: http://codepen.io/lewisSME/pen/mWQoye Any help greatly appreciated.
  15. lifvic

    Drag Action

    Hi, It's still the same question I posted before. I apologize if it was confusing. I think I found a better way to ask it this time. Problem: The jellyfish's tentacles stopped animating like it used to or it is only animating partially after being dragged, while the head was still animating the whole time. My thought process of creating this animation is: head and tentacles rotate, scale and move -- the original state, stored in the original function function original() { tlAll .to(total, 30, { bezier:path, ease:Power2.easeInOut
  16. hello folks first post. and first of all – thank you for the nice work so far. i'm really glad to use all of your stuff. i want to create a fullpage.js like slider based on gsap. i used a couple of resources to build a prototype. the problem: it’s hard to get slides and sections in a loop. it works for vertical navigation, but i have no idea for the horizontal navigation. would be great to get some hints or even modifications / better solutions. best regards jakob
  17. Apologies if this has been covered before, could't locate it in the forums or on StackOverflow etc. Currently working on a nice little horizontal slider that controls animations for an e-learning project. Unfortunately we work for big pharma who still mandate IE8 support (I know ). Anyway, it seems I've come across a little bug where on using the onThrowComplete method to calculate the end position via this.endX / this.maxX * markers.length fails in IE8. On closer inspection is appear this.maxX returns NaN in IE8. Anyone have any ideas as to what's happening? Cheers
  18. Hey all , I was doing a little experiment with Draggable and throwProps so the user could throw the draggable to a position and get a new panel from an info slider and I see a strange quirk in Internet Explorer. I'm using three snap positions [150,350,550] and then based on the index of the final snap position, I grab a new information panel to be shown, but IE sometimes ends on a number that is not in the snap array, but rather a lengthy decimal equivalent. I'll get 349.803101087 instead of 350. This results in my index query coming back as 0 so it flips back to panel 0. I see th
  19. I have a movie clip that I want to drag "scroll left" in 650 pixel increments. I have a movie clip (mc1) that is 650x650px on the stage (embedded within this clip is a symbol (mc2) that is 3250pxs x 650pxs (divided into 5 images) I want to drag through mc1 in 5 swipes revealing each image (650x650) on mc2 //movie clip 1 Draggable.create(mc1, {type:"scrollLeft", edgeResistance:0.5, throwProps:true}); Could you help me with the code that I need to initiate this please, I just need a push in the right direction and away I'll go until the next hurdle. Learning he
  20. Hi Guys, I'm trying to make a little hockey game using the draggable/throwprops plugins. I get that you can do hit detection while a draggable element(puck) is being dragged. But I need to do a hit detection on an object that is thrown (check to see if the puck has hit the posts, or is in the net etc). Any advice on where to start?
  21. Hi there, I'm making an installation piece which has a stagesize of 7770x1080 (basically 4 HD touchscreen monitors in a row with 30 px space between each ). I've been looking for a supersimple throwprops example that would just let me drag a movieclip along the x-axis for this, but I can't find one apart from the one on the site, and that one uses blitmask. I'm guessing a blitmask would be counterproductive covering such a stage-size. Is there an example somewhere that you know of that would just permit me to see the syntax for as3 throwprops the way it's featured in the js version of it?
  22. I can get position values during a drag (using Draggable). But can I get position values during a Throw (using throwProps)?
  23. There is an issue with the throwprops plugin doesn't work with Air sdk 17.0.0.172. Is anyone aware of this and if there is an upate to Greensock. I was having problems with the swiping motion in some places of my app where the scrolling motion would not give the appearance of movement. I have a book app where I'm adding pages dynmically and when the user swipes the pages, they appear as one continuous page. In places where it does not work correctly, the pages just appear, as if tapped and not swiped in a continous motion.
  24. I'm not sure if it's a bug but the latest Chrome under iOS 8 (old iPad2) behaves different than Safari while swiping/dragging content. Can be something in GSAP as well but guess it's Chrome for now. If you drag/throw a page while your finger leaves the screen the throwprops plugin detects you left and just does what it's supposed to do. Well, that's for iOS Safari, Chrome does the same except if you leave the screen while you swipe to the top and leave screen while swiping over the it's browser bar. If you do so the draggable/throwprops will just stop moving until you drag within the s
×