Share Posted February 21, 2022 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! See the Pen XWzEoby by samjm-the-decoder (@samjm-the-decoder) on CodePen Link to comment Share on other sites More sharing options...
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!Register a new account
Already have an account? Sign in here.Sign In Now