shanemielke

This is almost exactly what I wanted to play around with. Thank you so much for taking the time to do this. I would have probably lost an hour or two still trying to use edge resistance and bounds. You've saved me again!

My initial need is simply a circle and the draggable element sits in the middle of the circle. So I can for sure just do some x/y calculations based upon the distance from the center and probably call it a day. I added the part about the "star" and SVG just in case there was indeed some quick but possibly undocumented way of doing it. This is all in HTML (not canvas) at the moment. Thanks for the info !

How difficult would be it be use draggable inside of a custom shape? In a quick initial test the bounds function works within the square/rectangle shape of a div. What about keeping the dragged object inside of a custom shape like a circle? What about a custom shape like an SVG Star? I quickly tried an SVG circle tag and it didn't work. Just curious if anyone had tried anything like that before? Sorry if this has been covered before. I did a search and nothing popped up.

THANK YOU. It makes complete sense. It was tripping me out that I could see the start/end in the console log of the animation but not when targeting the attribute directly. Congrats on the latest updates. They look amazing! I'll be poking at them tonight!

This was a big help and has got me started! One thing I noticed though is that I can't seem to console log the the start/end variables for a particular animation inside of your function. https://codepen.io/shanemielke/pen/eYJGMNQ If you view the console you will see undefined for start/end variables. The reason why I am trying to check the start/end values this is because helper function seems to be triggering early when apply it to animations that have percentage based offsets like the following. scrollTrigger: { trigger: "#target", start: "top bottom", end: "bottom top-=100%", scrub: 1.5 },

So imagine the above demo didn't have scrub enabled. If you took the scrollbar and went from the top of the document to the bottom of the document very quickly, you would NOT see any of the timeline animations at all. No fade ins. No animations. You might see a tiny little flash or something. But you wouldn't see much else. I want to visually NOT see any of the animations that might happen in the red, orange or purple sections like if you had scrolled with the mouse. It's quite possible that I need to just make everything fromTo...and then possibly add some basic sets in timelines that happen before/after different timelines. I will be exploring my options today.

Thanks for the insight! Jack....you're not weird! Scrolling is scrolling. I was simply describing the visual in my head. My only end goal is to craft something that looks as I want regardless of what is going on behind the scenes Weird your demo didn't work for me. But I understand the concept of it. It gives me some ideas !!!

I'm building a super long scrolling site that involves multiple absolutely positioned bits of text that aren't scrolling with the page but triggered by scrolling elements. The codepen is just a quick demo to capture the essence of what is happening. In the real project the timing of the text is much more spread out. I LOVE the ScrollTrigger "scrub" setting when using the mouse wheel. But If I physically grab the scrollbar and make a big scroll movement, I get all of my text timelines completing out with the scrub time setting and the effect is a bunch of text all being seen at once that then fades out. Is there a way to have the scrub setting for a scrollTrigger only work on mousewheel but grabbing the scrollbar does not use this setting? I've also tried playing with toggleActions but adding "complete" does not seem to do handle this.

Both of these definitely have given me the insight I need to create what I'm looking to do. My stumbling point was just figuring out how to take a value that is in between a max/min value (in this case Hue) but have it loop. So often I'm just animating straightforward from/to variables. Not a start at a middle value and then increment/loop between the max/min. Thanks you two ! I should be launching what I have in a couple of days and I'll post the implemented project.

Hey Zach, Great questions. Sorry for being vague. I've only ever really animated directly between two colors so this is the first time I've ever needed to have any colors loop completely through a full rainbow of colors. 1) The project WebGL/three.js. I've basically got 3 texture colors and 2 light colors that area ll set to initial values. There are two primary colors (blue and red) but blue has 3-4 variations of light to dark.. Everything is looking great but I thought that it might be interesting to see the colors slowly rotate through the entire color spectrium over and over. 2) I think this is going to be a loop through the Hue as you said. I did find a little bit of code that essentially does this but because the tween is a tween of the H to 1, at the point that the colors all reached 1 they were all the same color, in sync and don't circle back around to an HSL of 0 to get all of the colors. (Sample code below) var colorStarfox = starfoxWireframeMaterial.color.getHSL(starfoxWireframeMaterial.color); TweenMax.to(colorArray, 30, { h: 1, repeat: -1, ease: Linear.easeNone, onUpdate() { starfoxWireframeMaterial.color.setHSL( colorStarfox.h, 1, 0.5); } }); Basically I was just curious if there was a clever way of going from some initial H value all the way to 1 and then restart at 0 and then keep looping. I have it in my head how to do this but it would be a little messy

I would like to set an initial palette of colors (2-3) and then have them all individually cycle and loop through the entire color spectrum. Is this a situation where I just manipulate the individual RGB values from their initial point to 255 and then when that is done start a secondary loop that goes from 0 to 255? Any suggestions on simplest ways of doing this?

For those that care or might find a need for this like I did....after digging into the documentation, I found that I could mix transformMatrix and shortRotation. TweenMax.set( mcTimelineCircle, { transformMatrix:{ shortRotation: targetAngle }}); When placed inside of an Event.ENTER_FRAME, I was able to take advantage of the smooth rotation as well as avoiding the crazy jumping that was happening as Flash was tweening from -179 to 180. Which is what it does by default if you do a trace of a movieclip's rotation as it does a 360-degree rotation.

I've got a project I'm working on that involves Flash. So I'm brushing off the old Flash skills and working through some issues and had a few questions. I have a circle that represents a timeline with dots all along the circle for key events. I'm rotating the circle around incrementally over time (based upon percentage) to trigger/show the events on the circle as it rotates. The reason I'm asking the following questions is that performance is super important for this as it's being used in broadcast . I'm not sure it will ever come out as smooth as I want because depending upon the length of the event the duration of the tween could be 30 minutes. Which might mean that the slow rotation of the circle will always come across as wobbly and jumpy in these ultra small distances rather than buttery smooth if it was a fast animation. Here is some quick code I'm working with to prototype some things. var tempRotation = -(toTimePercent(time) * (timelineMaxDegrees)) TweenMax.to(mcTimelineCircle, .25, { transformMatrix:{ rotation: tempRotation }, ease: Quad.easeInOut }); What are the performance differences between "rotation: -260" and "transformMatrix:{ rotation: -260 }"? I feel like I remember reading transformMatrix was smoother. 2) Anytime I try to tween the rotation of the circle past -180 the rotation goes all crazy doing a full -360 degree loop to get to point (example: -181) . So I did some research and learned about the directionalRotation plugin. This seems to have fixed that issue by doing the following: var tempRotation = -(toTimePercent(time) * (timelineMaxDegrees)) TweenMax.to(mcTimelineCircle, .25, { directionalRotation: tempRotation + "_short", ease: Quad.easeInOut }); But if transformMatrix is supposedly smoother.....then I'm going to lose some performance doing this. I tried wrapping the above into transformMatrix "transformMatrix:{ directionalRotation: tempRotation + "_short" }," but it didn't work. Should I still be ok without TransformMatrix? Or is TransformMatrix just a JS thing and AS3 is just ignoring it and i'm just getting lucky that the it works at all? Thanks in advance for any thoughts as I go down memory lane on this Flash project.

Really it's several things that ultimately result in me not really asking questions on forums. Most of my work is usually under NDA I'm bullheaded. I usually always figure things out. I have many friends who are smarter than me and often they have experienced what I might be experiencing. Since I'm 50% Designer / 50% Developer I'm always insecure, scared and jaded by how snobby & hardcore people on places like StackOverflow can be when asking a question or when people post solutions. Regardless of results, my personal style of coding/development is drastically different than how I know other people do things. So I always try and do as much research as I can before asking a question to make sure it doesn't come down to some trivial coding error on my part. In this situation after looking at the PixiPlugin page I only saw mention of hue/colorize/etc and thought somehow maybe tint was wrapped up in the ColorMatrixFilter and I just wasn't referencing things correctly. Thanks for being so open and inviting and you might see me lurking from time to time. Hoping to have this project done by this weekend and then I will tag it on twitter.

So it looks like I have something outdated either in pixi or tweenmax. I pasted in the 3 linked js files in the demo and it works Time to figure out which one it is!

@GreenSock This is going to sound completely stupid but...I haven't ever used codepen because I never really have stuff I can show. So much of what I do just can't be public in any way shape or form. Plus I'm bullheaded and I usually don't ask for help. I was hoping that just by looking at the syntax I was doing something really stupid wrong and someone would point out an obvious mistake.

I'm wondering what I could be doing wrong. I'm simply trying to tween the tint of a sprite and nothing happens. Sprite minimapDetails = new PIXI.Sprite(resources.minimap_details.texture); minimapVizGroup.addChild(minimapDetails); minimapDetails.position.x = 0; minimapDetails.position.y = 0; minimapDetails.width = 1000; minimapDetails.height = 320; minimapDetails.tint = 0x33CCFF; GSAP code: minimapAnimation.fromTo( minimapDetails, 2, {pixi:{ tint: 0xFFFFFF }}, {pixi:{ tint: 0xFF0000 }, ease: Circ.easeOut }, 0 ); When I replace "tint" with "colorize" the color changes but it's not the same vibrance or color as when I change the tint on the sprite at creation. So I know colorize isn't doing the same thing as tint.