dennisvg

thanks a lot

Let me first cheer this forum; I appreciate the quick replies and time and effort that is spent in providing answers a lot! ? Interesting insight about the double load of GSAP; the 2.0.1 inside the div is the one I put there in the builder (as they advice to do); the second one then must be part of the theme indeed. But without me adding the script; the animation doesn't work.. so in that case that's something to ask the theme builders. You helped me a lot and I'd like to ask two closing questions for this post: 1. Is there also a double transformation (CSS and transform attribute) going on in the codepen I shared earlier? 2. I guess this is more about understanding SVG in general (and in line with the first question): -I use illustrator to create my svg and then I edit it to my likings in my code-editor afterwards (sublime text in this case); -I only use GSAP to apply any kind of transformation (to the extend of my knowledge); -In my understanding (and I'm not a schooled programmer) the svg code contains the coordination of the elements relative to it's viewBox; Therefore I'd like to know: if I place a an element x: 50, y:50 within a viewBox of 100x100, and then export it as an SVG, does it mean that Adobe Illustrator then applies a CSS transformation to the element within that SVG code (since it's not x:0, y:0)? Or for example: if I then apply a fromTo: x:10 to x: 70 to that element; does that always result in a double transformation; and that's what the newest version of GSAP is working around? I hope you understand my questions, and that they do not come across too green Thanks again

@GreenSock Thank you for the interesting insights. Although your answer makes a lot of sense, I do have remaining questions: For the animation I only refer to TweenMax; 1. as far as I understand, the CSSPlugin comes with the TweenMax, am I correct; so how can it be in conflict? 2. which would mean that the building environment I use (semplice theme for wordpress) refers to the CSSPlugin; can I overwrite that reference? 3. My apologies if this should have been clear from your answer; has the conflict between the transform attribute and the CSS transforms only to do with the mis matching versions; or with my lines of code as well? Thank you, Dennis

My guess by the way is that it's a timing issue, maybe due to my code, but I can not figure it out..

Yes we noticed too; strange. Hope you can find something. Thank a lot in advance ?

Hi Carl, thanks for the quick reply I should have done that in the first place, but here it is: http://grip.studioinherent.com/tweenmax-new http://grip.studioinherent.com/tweenmax-old The first link refers to the 2.0.1 library the second to 1.18.2 -Now when clicking the eyes of the blue image: the white dashed should rotate continuously; as you can notice in the first link (new library) they aren't, in the second link (the old library) they do; -When clicking the eyes in the yellow image: each word should wiggle every time the purple dot hits it; as you can notice in the first link (new library) not all the words wiggle all the time, in the second link (the new library) they do; I hope these links can tell you something! otherwise I guess the question remains whether it would be a problem to keep referring to the 1.18.1 thank you, Dennis

Hi GS, In advance my apologies for only posting questions that are maybe a bit difficult to troubleshoot; but I shout out to your experience I've created an interactive image (click on eyes, brain and other parts of the image :-)); -now when I implement it in my webbuilder (I use the Semplice module in Wordpress) it works perfect when I refer to TweenMax 1.18.2; -but some animations fail when I refer to TweenMax 2.0.1; The problem is: when I make a CodePen they both work perfectly fine! -so most likely there's something with the webbuilder that's in conflict with the TweenMax 2.0.1 library; and is not with the older version; So I guess – by the lack of my web knowledge – my question is either: - Does anyone have I wild guess why the newer version is in conflict? - is it smart –or a problem– to keep referring to the 1.18.2 library? Hope to hear from you and thanks very much! Dennis

Hi GS, I've got another question for some thing I'm trying: In the codepen I've attached you'll see a quick set up for something like a pong game. I managed to get the pong-handlers to move on click Now to move the ball I was just exploring to use the ticker and the ball position++ - Is there a way to change the velocity of such movement? Of course I have a lot of other challenges ahead, like the collision detection and the direction of the ball; But that's for later (most probably I have to consult the forum again :-)) Hope to hear from you again! D

@Carl Thank you and thank you very much for the quick response, much appreciated. Yes, I indeed thought so too. I'll see what happens if I manage to reproduce it on a smaller scale; however I set up each player independently before copy them to the production environment. They all work(ed) fine. I guess I'll go along with your best guess; which does help me – It's good to know you didn't see the weird line; and positive that I most probably didn't use GSAP incorrectly. I think for now I know enough, thanks again! Dennis

Hi GS, This can be a bit of a difficult question; I hope not. I've created a page with 24 different svg GSAP animated "audio players". (see: www.dennisvangaalen.nl/clockworks ) I used the Semplice module in wordpress as a framework with custom javascript for the players (all SVG is code). Now I've noticed that at the edge of some of the players (of the most right column) a strange slowly appearing white flickering pixel line shows up, only when playing the timeline/audio. It's only doing this in Chrome I believe. I found some things about -webkit-backface-visibility: hidden; -Tried to apply that to the SVG's. -Plus did somehting like this (to see if maybe the SVG is not completely stable in width or so.. and some white of the background appears (?)): .column, .row, .content-block, .sections, .content-container, .column-content, .content-wrapper, .container, #content-holder, .is-content, { background-color: #00000 !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; } - But it won't help - The flickering line is not always visible; it has to do with scaling the browser as well - Therefore I think it's most likely something with the Semplice template - Or Chrome webkit I attached a screendump to show what I see; in case you guys don't see anything happen (which would be great some how I believe) Nonetheless I wanted to share this with you, since I'm breaking my head and maybe some one recognises this? Hope you can help or clear things up for me. (and btw– maybe my JS script is not one of the most efficient; it's how I was able to manage to make it work :-)) thanks, Dennis

Thank you very much! I really appreciate the quick response and insight you gave me, that really helps a lot to understand it.

@OSUblake Thank you for your quick reply! I'll look into all of your suggestions They look very helpful. I'm glad you mentioned the difference between changing the x y attributes of some elements and translate; since I indeed figured the rect and circle were being translated by the mouse position. As for your questions: In this case I was trying to rotate the ball around it's bottom right corner (transform-origin: 100% 100%). Since the ball position follows the mouseposition; I hoped to see the ball continue to rotate around it's own corner. I changed the pen and applied the rotation on the blue stick, with its rotation point in the middle (transform-origin: 50% 50%) – maybe that gives a better impression. If you point your mouse in the left upper corner of the screen you can see what I intended; if you move the mouse down to the right you can see the rotation point is not changing. I hope you can tell how I approach this wrong thanks again

Hi, I'm getting more and more familiair with GSAP and JS, but I'm only diving in to it since last week. Now I was playing around with the TweenMax.ticker and mousemove event based on: But I got stuck on trying two things: 1)move SVG paths in the same way as the circle element; I did get the rect element to work by changing the cx and cy into x an y, but I don't know how to interpret this with a path position, since the ticker event does not seem to work if I give the SVG group tag an id. 2)I attached a codepen sketch based on the pen from Blake Bowen; as you can see I simply added a timeline to rotate one of the elements. Now I want this to keep on rotating around the origin value of the element, but this doesn't happen. The origin point stays on the begin value of the element (which is the top left corner) and does not move accordingly to the mouse position. Initially I want to be able to do: 1)move SVG paths based on mouse position 2)know how to apply more than the change of position accordingly Can anyone help me? Please let me know if my question is unclear. Thank you in advance!