samjm
-
Posts
6 -
Joined
-
Last visited
About samjm
samjm's Achievements
-
-
Rare
-
-
-
Rare
Recent Badges
0
Reputation
-
Maybe changing vectors to png images but keeping the svg structure as it is? I have a few images and a foreignObject to place a video inside the svg, I'm thinking if just converting the vector items to png (or webP) images could work? In case of using PixiJS, I saw a little on canvas and using: as initial reference to work with scrollTrigger, but how recommended could it be comparing to the first option.
-
hi Jack! I'm sorry I couldn't reply before, has been a few months since I started working on this but I couldn't continue until now. I think I get now why my doubts were fuzzy as I hadn't understand that part, now I've changed my approach a little. Basically, from a large vertical svg I'm using a div as trigger and creating timelines for each item based on the start/end percentages relative to the trigger. Something like: <body> <div class="wrapper"> <svg> <g id="itemX"> ... </g> ... </svg> </div> <script> var tl = gsap.timeline({ scrollTrigger:{ trigger: ".wrapper", ... start: '15% top', end: '30% 80%', } }).from('#itemX', {drawSVG: 0}, 0); ... </script> </body> A result of what I want to achieve can be seen here http://polifonias.com.mx/v4/pruebas/historia-1/ do you think this approach is correct? If so, now I have performance issues as the svg can be quite large and have other media on it. I was reading the optimization points from and started to doubt if I might be going in the wrong way or if I should maybe consider using PixiJS to improve the rendering process. What do you think about it? Thanks again for you help!
-
Thanks Jack! yes! thank you, I think I have it clear so far. I'm sorry, my bad, what I mean is to trigger both things when maybe a third one used as trigger reaches a spot in the the viewport. e.g. animate both the square1 inside the svg <svg id="svg-init" x="0px" y="0px" width="1024px" height="2000px"> <g id="square1"> <rect x="96" y="200" fill="#1A1AFF" width="344" height="223"/> </g> </svg> and image_01 when the 50% of section_01used as trigger reaches top of the viewport <section id="section_01"> <img id="image_01" src="image.png" /> <!-- image in background with height 100vh --> <h1>Section 1</h1> </section> The thing here is that the elements in the svg might not always be exactly within the section_01 height size as it is independent of it and might not move at the same time as the image_01 which is in fact within the section_01. I'll focus on that approach, first focus and create the general schema to use both image and svg and then move to ScrollTrigger. Thanks again Jack!
-
Thanks a lot Jack! I think I'm still confused on how the trigger element works as part of the scrollable components. Maybe more specific to gsap and scrollTrigger is that if it's possible to move both svg and html elements as part of the same timeline in a synchronized way, e.g. to display an image that is in a section and animate an element of the svg at the same time when the top of each section reaches 50% of the viewport. I guess the answer is true but the svg elements should be in a relative position according to each section right? I'll try to make it a little simpler and keep you informed! I just found the sample of: https://codepen.io/creativeocean/pen/qBbBLyB on which there is text and images inside the svg, which I think gives more control over the position of all the elements -more or less what I want to achieve-. Do you think this approach could be better instead of having text and images separated from the svg elements? Thanks again for your help!
-
Hi Jack, thanks for the welcome and answer! I'm sorry for not answering quickly, I have been testing and trying to refine my example in order to make it minimal. I guess I tried to wrap many things in a single request and as you mentioned, it turned out a little fuzzy to understand. I hope it can be a little more clear now. Basically I will have a large svg with many elements that will animate while scrolling. Besides, text and images will appear at certain positions, these elements are not part of the svg but are placed in html sections. In my code example I just have an svg with some squares placed in different positions, on the other hand I have a set of sections on which I'm displaying text in front and images (with height of the size of the viewport) on the back of the svg content. The svg part: <svg id="svg-init" x="0px" y="0px" width="1024px" height="2000px" viewBox="0 0 1024 2000" enable-background="new 0 0 1024 2000" xml:space="preserve"> <g id="square1"> <rect x="96" y="200" fill="#1A1AFF" width="344" height="223"/> </g> <g class="marker2"> <rect x="96" y="500" fill="#1A1AFF" width="50" height="100vh"/> </g> <g id="square2"> <rect x="96" y="700" fill="#FF390B" width="344" height="223"/> </g> <g class="marker3"> <rect x="96" y="1000" fill="#1A1AFF" width="50" height="100vh"/> </g> <g id="square3"> <rect x="96" y="1200" fill="#15FF31" width="344" height="223"/> </g> </svg> The sections part: <section id="section_01"> <!-- some content--> </section> <section id="section_02"> <!-- some content--> </section> <section id="section_03"> <!-- some content--> </section> The thing I'm having trouble to understand is how to trigger the svg animations in a synchronized manner with the text and images that I have in the sections tags. After some tests I added (as part of the svg) other elements (squares) which I called marker2 and marker3 before the squares in order to use those markers only to trigger the squares movement, I'm not sure if this trick could be a good idea as it works depending on the height I set on these markers or the squares. (in the example above, the movement can bee seen working better when in full size). Visually the operation works more or less as expected, i.e. the square's movement is triggered when each section appear on the viewport, however is kind of tricky to specify when to trigger the movement as I would like to specify that the square2 should start to move when the section_02 is visible (make the square appear always in the same position when the section is displayed). The marker's trick worked a little but is not so easy to see. I'm wondering if maybe is possible, for instance, use an id of an html section as trigger and when the section appears in the viewport I could have control over the svg elements. Thanks again for your help and hope it can be a little easier to understand!
-
Hi all! I'm wondering if you can show me a clue on how to perform the next operation I haven't been able to do. I have a mega svg on which I want to scroll down and show elements of the svg along with other html elements by pinning multiple sections of the large svg. At certain position I want to display an image in background while the svg elements appear in front while scrolling, let's say that the svg will be divided in four sections that will show a few animations using the ScrollTrigger. After some adjustments I've made to the css properties of the svg I've managed to approach a little to what I need but I'm still not sure if I'm going in a correct direction. What I want to achieve is to display text (video, or any other html element) in front and an image in background while scrolling through the large svg by pinnning a section of the svg to display the content, then scroll and pin again to the next section and so on. In my test, basically I have merged an image parallax with an svg pinning animation. Is there any suggestion or better approach you could advise me to do this. Thanks a lot in advance for your appreciated help!