Jump to content
Search Community

Juno911

Business
  • Posts

    33
  • Joined

  • Last visited

Everything posted by Juno911

  1. I found out providing a public demo with a CSP ready webserver isnt that easy to show you. My script is loaded from external as this is CSP demanded as well. Script and Style is treated pretty much the same in CSP. I applied some further tests and inspected SplitText.js version 3.2.6 provided as UMD. I really didnt dig too deep into it but I recommend to get rid of : _divStart = " style='position:relative;display:inline-block;'",in line 71. Inline styles harm CSP https://developers.google.com/web/fundamentals/security/csp. In all other places you use CSSOM, which is just great and respect CSP. Just inline styles or something like document.getElementById(id).setAttribute('style', 'left: 343px') is really bad. But to use document.getElementById(id).style or document.getElementById(id).style.cssText is just fine. $().css() does this CSP ready as well for the community. But this does not help here. The solution which works for me: SplitText.js:_cssClassFunc:71: // _divStart = " style='position:relative;display:inline-block;'", // took this line out SplitText.js:_cssClassFunc:85: // return "<" + tag + _divStart + (cssClass ? " class='" + cssClass + (iterate ? num++ : "") + "'>" : ">"); // took this line out SplitText.js:_cssClassFunc:86: return "<" + tag + (cssClass ? " class='" + cssClass + (iterate ? num++ : "") + "'>" : ">"); // inserted new script line [removed var:_divStart] SplitText.js:_setPositionsAfterSplit:191: j[i].style.display = "inline-block"; // inserted new script line SplitText.js:_setPositionsAfterSplit:192: j[i].style.position = "relative"; // inserted new script line As there is action before _setPositionsAfterSplit e.g. in split() or even _toArray(), changes probably could also be applied already there. Tested with chars and words in a small environment in ChromeDev and IOS native. I can test further and report if it helps. Not sure if my change is production safe. I would not recommend to copy that over. It would be nice if you could provide a patch instead.
  2. The issue: Browser CSP styleSrc is self. Using SplitText triggers the policy on applying style attributes to the div childrens SplitText creates itself. The questions: Is it possible to have the divs, pre-created by SplitText with position: relative; display: inline-block;, styled by classes instead of attributes? Or is it possible to pr-create the children self and pass them to SplitText for usage? Any other ideas to come around that? Its just about the process of creation (inserting to DOM). Changes to the existing tagObj can be done in attributes. But the creation needs to work different. I would appreciate any idea to work with SplitText and CSP styleSrc policy to just self. Thanks so much.
  3. But I figured out that (without loading new with run) the play after the first staggers always until the same position and then just stop to stagger. If you then run code again the second time will break somewhere else but then in this run will break/stop always in that position until you run again. This non static behaviour makes it dificult for me to find any reason why this happens. I am almost sure this has something to do with the kill process, but this kill process works also in front on the first time, so I dont know why it should break something first in the second play.
  4. I have this simple timeline which splits some text and then stagger it. It all works well. The first time. Then randomness seems to overtake. This is how to reproduce it: Click run, then it btn1. All text is staggered fine until the end. Click another time on the btn1 and the problems start. The text is not staggered until the end. It stops somewhere randomly. Random means sometimes it staggers 3 sentences, sometimes 4 and then just stop. The curious thing is when you hit again the run button to reload the code the first time plays nice again but then the second time it stops in another position then then first run. And so on. So something interupts my timeline for some reason but the duration is checked and it is all time the same. Any idea why this timeline makes bad things from the second play while the first on is okay at any time? Sometimes even the second and third one is fine but I cant find any pattern which decides over that. Thanks a lot
  5. Thanks a lot guys. Having TweenFromTo as a master part was not clear to me that works. This is totally the solution I was looking for. Thank you so much.
  6. What would be the best approach to play all tweens of a timeline but not those between two labels. So the two labels mark a start and end position and all tweens in between should be skipped or soft-removed. I am looking for a parameter to play the timeline first fully, then again but skipping a specific passage, and at last again fully. Think of a timeline containing a start label, a tween and a end label. Loop this trio several times. Now you have a lot of tweens, all with a label before and after it. Lets say the timeline has 10 tweens (means 20 labels which are 10 start and 10 end). Now I dont want to play Tween 6, but all others. I could learn all labels from timeline array, then all tweens from timeline and manipulate data unitl I have just those tweens I prefer. But this is the last way I would go. More elegant appears the tweenFromTo in a loop. Each time it loops it play all tweens between a start and end label. But this is not timeline based anymore, just tweening. So, where is this timeline.tweenNotFromTo("start_1", "end_1").tweenNotFromTo.("start_3", "end_3") super function? What is your recommendation?
  7. Sorry for late response. I didnt test it in CodePen. My local environment is to complex to be transfered to codepen, hence I wait until I can get the update from your business green package. How does that work with GreenSock? YOu applied a bugfix as far as I understood you. When do you turn beta into live and how do members get message about? Is there a link which describes that? Once I have the live file, I will import to my local and test it. Then I can give feedback on it.
  8. Sorri for asking so much questions about DevTool Element, but by now, its by far the most interesting thing to me, because if it works well, my job is done in half time. Wasnt that even something your site promises Please check my once more I have two issues here: 1.) In GSDevTools I state a very small timescale. But its not honored. The time-scale is displayed correctly in browser, but my new time-scale value is simply the new scale of 1. So whatever I write there its the speed of one and the label of my choice. Is this something I need to achieve with duration instead? But whats the usage of changing the timescale if each value has the same impact? I think I see sth wrong here.. 2.) The less fun part. I guess its has something to do again with this 2 seconds magic happening in the beginning. Sop here is the way to reproduce - start the pen - pause the timeline before 2 seconds are gone - refresh your browser what would u expect? Timeline at start position and if you hit play, its starts from 0. Right? And thats the case. - start the pen - pause in the middle (5 sec or so) - refresh your browser Something is different. Playbars Timeline is in 0 position, but GreenSocks Timeline starts to play from pos1 somehow. This is my question. Why? - start the pen - DO NOT PAUSE - refresh while timeline is running (after 5 sec or so) Now you have again the good picture. So the pause is somehow installing a fixed position. Doesnt matter where you stop. If it is later than that magic 2 seconds,. it always starts from a position I dont know who has configured it Can u find it out? Thanks a lot.
  9. Yes, I am already dealing with animation selectors. I changed that already in a way, that GVDevTools learn by script which tl is active. So this saves at least the time to switch the code, because jumping between timelines is otherwise no fun. I will try that display block hack later and let u know. In regard to the touch issue I like to take back my words :-). I had a working bar at MAC computer, but a "sticky" bar at all my phones and pads. But as I started to inspect after your message, the problem was gone. I am not totally sure, but since I am dealing with keyframes vor different screens,. it might happened, that I somehow moved or overlayered the touch part in a way that is was still visible, but not touchable anymore. Since it worked in the computer and since I never used GSDevTools in my real smartphone before, I simply thought that its not working. So sorry for a wrong report.
  10. Ha, somehow I didnt come to the idea that the divs are appended to each other. I thought they will all be operated into the #messages div. However, you made the flow totally clear and from that I was able to develop another solution without absolute positioning, what I try to avoid whenever doable. Once the thing was clear after reading your words, it made click and it was clear that this is coming from the document flow, not from gsap tools. Thanks for shedding light here. Appreciate it a lot! I hope that I soon can share my gsap web project I am working on right now.
  11. Hi, I have robbered some code from gsap examples and changed it to my purposes. However, something I do not understand with the positioning here. Each staggerFrom has the same yaxis description. Why do the following containers fall below the previous one? I mean this is want we want, but once I come to the part where I want to reset the yaxis back to 0, I must say, that I dont understand how the thing is going. If I clear all props, something bad happens. I dont want to reposition bu calculating the yaxis. I just want to say staggerFrom y:0 and expect to be positioned in zero. Not sure if the question is totally clear. So why to each textarray element falls below each other? And how can I say the third element (2pos) that it should start from the top of its div? Any help is much appreciated.
  12. I saw the GSDevTools Videos and I recognized everyone has a cooler player than me. Its because I am developing in mobile view. I have two issues here an a question if someone has an idea for a cool workaround. 1.) Working with GSDevTools in real smartphones is hard. Its somehow messy to touch it on iPhone 6/7/8. Its there, but you cant grab it. Sometimes it works, sometimes the control elements are no touchable. Mobile testing can be done well only in mobile telephones, hence a working devtool here would be the help of my life. 2.) Before we check in real phones, we checkout ff or chromes mobile view. Its working like a charme but a lot of nice features are gone, where just the play button and the timecontrol is left. No access to parallel timelines by ID, no chance to hit start and end markers. Is there a nice trick or even a known browser setting to have GSDevTools running in total without loosing mobile view on the screen? And for smartphones I have no idea how to approach. I mean who still uses computers? Instead of developers
  13. Awesome, I tested already both examples, the case with the ID from Craig, and the case from Jack and it literally does what I need to. The detailed description of Jack even brought up some new aspects I didnt see before. Thanks a lot for that. I saw another post which was talking about these 2 seconds thing. Others probably also experienced things like me. But somehow I didnt get the relation to my topic. But now its totally clear. Again THANKS
  14. Hey, thanks for reply. Actually the second part. Overall GSDevTools should always interact with the timeline I am playing. If I jump out the second into a third, it should reset again, showing the exact duration of timeline played. No other timelines should be controlled in that time, always just one is in focus. Think of three timelines played after each other, not concurrent. In a concurrent case I would prefer a global timeline. In a sequence, I prefer a control pane per timeline. The breakpoint is either a command when the previous timeline is stopped, or where the new one is started. I expected listing GSDevTools at each end of a timeline would lead into a kill of the first (either kill of timeline itself, at least control pane for timelines) and somehow it does in my codepen example. But only if I change to second timeline fast by hiting the button. If I wait to long, the same lines of code are doing different things. What I guess is coming from a wrong usage and not the tool itself. I hope things are a bit clearer now
  15. Hi, I have two timelines setup doing a great job. At the end of each timeline I have GSDevTools.create(). It first seems to work fine, e.g. wenn hit the button, the second timeline starts well. But the curious thing is, that if the first timeline runs for more than 5 seconds, the 2nd timeline GSDevTool Display is not okay anymore. Means the timeline lost 20 seconds somehow and when the play control is done, the animation is still running for 20 seconds or more. Any idea how to approoach to get two nice controllable timelines here, which display correct data? Thanks a lot
  16. I solved that by clearing all props between the two staggerFrom commands
  17. Hi, please check my codepen. tl0 starts immediately and animates the background to yellow over 10 seconds. However, while the animation is going, please click the button. It will start tl1. It seems nothing happens, but at the bottom some strange vertical drawing is happening. But the staggerFrom commands are fine. If you load each staggerFrom alone (comment the other quickly) all is fine. With both. But if I use them in that order, they dont do after each other what they do in a standalone case. Any idea why this happens? Do I have to reset the SVG drawing somehow first? Thanks a lot!
  18. Thanks a lot. Text Plugin is my partner! It does exactly what I need, hence I will use it. The example page is nice, however, the CodePen examples are not running in my MAC Safari, Chrome or Firefox. Thats why I stopped to look into them and started to learn about Text Plugin. Again, thanks for the tipp! It is very welcome!
  19. Hey guys, my CodePen actually does what I want. But not in the way I want. Target: Have a transparent (background-less) text-string dialogue (actually monologue) in an absolute position... Challenge: ...without defining an absolute position, in one case with span, in other with div Look, I want more than one element appear in the same position. But since its not a image, the previous staggerelement needs to be removed first, because otherwise the text overlaps. Case div: A change to only the appearance (visibility, opacity, autoAlpha [where is the difference?]) wont help. Because each div takes space. I need to work with display none and block. But how can I tell a stagger to be displayed=none when the second stagger appears? My workaround with absolute position is bad. It even needs to span a background color, because the prev elem of course is still there, just underneath the other. Case span: A span is already an inline element. Thats nice. But it does not support background. What I anyway dont want. So here I look also for an option, to get, then send it away (of course not with a second tween or line of code). So I am looking for a pretty smart line of code. A single one which does the dialogue. Never with an absolute position, never with a background. In one case with div where I need to deal with display to ensure all is done in the same corridor. In other case with span, where I have no idea by now how to approach. I guess if the display thing is working with div, it will do the job with span as well, so one solution for both problems. Hopefully... Thanks for any help on this.
  20. However, its working. I will try to start my second drawing, then I will see if this time all steps go right the first time. Do you maybe know a trick to embed svg smart into html? I read this post https://wiki.selfhtml.org/wiki/SVG/Einbindung (hope it changes the language to yours) and it said SVG can be embedded with <object> to let JS still be able to access the pathes. But this is not working. Whatever I do (img, background, embed, object) its just the static svg. Only inline svg makes the animation done. By now I get contents into php var and then simply echo in html. Because inline svg is really not an option. It makes no sense to see these files ever again after they work. Do you have any idea to use regular html technique to pull scg like a style or script?
  21. Thats crazy, my new svg (which I took now from you codepen) has more lines that my one I recently copied. Is there maybe a codepen automat detecting suboptimal SVG and make it better? I really cant think of this without prompting something, but who knows.
  22. ooh yeah, now I got it. And I immediately tested it. And my plugins loaded well. Now I made it run locally as well. Did you change anything to the codepens SVG? I copied from my local svg to codepen. You added js plugins and this did the job. Now I copied back codepens SVG to my local and it worked immediately, But the codepen SVG is from my local copy and I did no changes. Either code pen has a magic inside or something has changed. Do you know of something? Otherweise we can close the case, because finally things are working, even if I dont know why they work now and not before. That makes only sense in case of a SVG change. But who could have done that?
  23. Yeah I saw that in a video already, I simply forgot in my first pen.It will not happen again :-). And I saw the place where you put them, so this is pretty clear and simple. Someone just has to think of it. Not sure why JS window didnt give any error. Sometimes there is a red mark, but this time there wasnt any. Probably the console did show some errors, but I didnt check. However, its working now in a 90% good way and I can start to be creative. Super cool tool, super cool community. Its the 3rd time I ask and even my colleagues in my company do not answer that fast! Thats a message guys
  24. First of all thanks for having a look. And for fixing it. However, in the real server env all these stuff is loaded. I just copied the code from my local script and unfortunately the code is running well. I mean I am totally happy. I see my logo animated the very first time, but why dont I see that local. I will compare versioning of libs loaded and if this fails, I will isolate my local code to a page out of its framework. Its at least and for sure not the browser, because this pen here now runs like a charme. You guys are my heroes of the day and week. Thanks a lot!
  25. ok, I did the job already. I am now curious what I do wrong. I hope its not too much. Please have a look here, Sir. Its still the same svg source file I used before. I reduced my code to a minimum. I do not have a specific target yet. Oh yes, I have. To learn SVGDraw. Finally I probably look for a animation where three groups of units exist and somehow animate the logo appearance in a parallel sequence. Once I get my first image running well, I am sure I will find inspiration on your page. But unfortunately I didnt get the click moment yet, to make the lines even run very simply. I hope the case I now better understandable. I first had to sign up with CodePen, I am not a developer.
×
×
  • Create New...