No parallax on complex SVG element.
Closed this issue · 1 comments
Arteau commented
Hi,
first of all, I love this plugin, it's really handy and already saved me lots of work.
That being said, I'm trying to parallax an SVG to a text container, the text container is just a div containing an h1, h2, and a p element.
I just changed the 'div' to 'parallax-element' and that works.
Underneath it is an SVG illustration with lots of groups and paths, contained within a div. When I change that 'div' to 'parallax-element' it doesn't do anything.
Here is are the relevant code snippets:
the Home.vue view (the template tags broke GitHubs code view, so I left them out, they're there in the actual code though)
<parallax-container class="home main-content">
<parallax-element :parallaxStrength="-10" :type="'translation'" class="infoBox">
<h1>Peter Paul Rubens</h1>
<h2>1577 - 1640</h2>
<p class="infoText">Take an animated journey to the 16th and 17th century, and learn about the life of Flemish painter Peter Paul Rubens.</p>
<router-link to="/panels/one">
<div class="callToAction">
<button>Begin</button>
</div>
</router-link>
</parallax-element>
<parallax-element :parallaxStrength="-7" :type="'translation'" class="illustration">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 402.24 487.95">
<title>rubens_lines</title>
<g id="hat">
<path class="cls-1" d="M153.5,246.5c-4.86.15-13.53,2.14-18.33,2.91C104,254.4,50,244.19,50,209.66c0-102.86,96.72-103,142.84-123.36,63.39-28,61.82-81.16,128-81.16,31.89,0,101.79,26.07,101.79,101.79,0,46.93-72,96.4-111.61,113.07" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M117.45,209.25c-7.26-1.46-9.62-7.85-9.62-15.05C107.83,110.45,254.61,81,318.13,81c11.32,0,19.66,6.32,30.84,13.12" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M146,102.39c.71-35.19,62.25-60.29,94.88-51.26" transform="translate(-49.03 -4.14)"/>
</g>
<g id="robes">
<path class="cls-1" d="M338.31,327.71a3.19,3.19,0,0,1,1.93-.54c14.06,0,9.18,13.19,31,13.19,6.21,0,10.66-.82,18.16-.82,2.5,0,5,.07,7.5.07,5.08,0,6.75-.31,9.35-.31,11.68,0,34.41,13.63,44.45,20.93" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M172.16,371.92c-13.62,35-54.45,21.7-65.87,51.74a15.52,15.52,0,0,1,5.55-3.43" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M244.11,398.84c-8.61,31.33-26.54,37.54-26.54,55.33,0,6.15,1.52,9.24,1.52,18a58,58,0,0,1-3.24,19.58" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M123.56,410.37a80.9,80.9,0,0,0-.38,8.88,68.33,68.33,0,0,1-.68,7.25c-2.7,18.78-6.84,21.3-13,33" transform="translate(-49.03 -4.14)"/>
</g>
<g id="collar">
<path class="cls-1" d="M246.86,379.34c21.9-43.8,66.18-67.08,66.59-98.59" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M309.75,263.18a26.84,26.84,0,0,0,8.1,1.09c4.92,0,9.28-.79,14.73-.79,12,0,28.74,3.69,37,3.69h.5a5.54,5.54,0,0,1,1.91.24c-.06,3.24-.51,6.33-.51,9.57,0,4.57,1.43,14.08,1.43,21.55,0,16.81-7.21,25.87-18.61,37.88" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M243.84,408.17c12.18-46.6,93.41-47.61,93.41-78.84,0-7.39-5-14-5-20.25,0-20.91,23-16.74,30.79-33.64,0,0-7.51,14.06-13.51,19.06-.95.79.06,4.59,0,5" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M173,329.08c0,1.65.13,3.24.13,4.8,0,16-17.31,27.67-18.45,43,4-.68,9.35-6.84,20.1-6.84,17.64,0,12.29,7.88,31.07,7.88,7.4,0,9.37-4.81,17.23-7.62" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M227.09,366.71c3.64,1.25,3.69,3.51,19.38,11.65" transform="translate(-49.03 -4.14)"/>
</g>
<g id="underside_hat" data-name="underside hat">
<path class="cls-1" d="M135.92,195.62a10.51,10.51,0,0,1-.14-1.78c0-51.5,69.23-66.12,122-66.12,14.53,0,28.49,1.6,52,17.31" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M142,181.07C152.94,154,210.51,130,239.73,130c6.42,0,7.6,2.68,15.28,2.68,1.53,0,3.07-.08,4.6-.08,4.48,0,22.82,4.84,25.76,5.72" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M166.67,153.06c21.93-11.89,62.21-16.38,82.47-16.38,25,0,54.13,9.23,59.85,13.17" transform="translate(-49.03 -4.14)"/>
</g>
<g id="face_contour" data-name="face contour">
<path class="cls-1" d="M137,188.48c0,.11,16.45,50.75,16.45,54.81,0,5.5-1.68,11.12-1.68,16.6,0,14.33,9.89,12.65,18,24.75,4,5.87,2.8,13.12,5.73,19.35" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M289.15,232.69c.26-11.67,6.58-31.87,19.85-31.87a3.58,3.58,0,0,1,1.48.28,15.15,15.15,0,0,1,.95,5.63c0,2.74-3.05,44-3.05,51.41v2.6c0,.87.06,1.76.06,2.61,0,3.61-1.78,5.35-5.14,5.35h-.14" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M296.29,248.62c0-16.74.65-33.2,8.33-39.06" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M302.33,273.06a44.76,44.76,0,0,1,.52,7.15c0,5.65-.74,11.44-.74,17.2a44.66,44.66,0,0,0,.75,8.63" transform="translate(-49.03 -4.14)"/>
</g>
<g id="lips">
<path class="cls-1" d="M199.63,295.58c1.22-1.71,3.59-4.88,6.14-4.88,1.75,0,3,1.68,4.67,1.68,1.92,0,3.33-3.79,15.12-3.79a17.39,17.39,0,0,1,6.37,1" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M202.1,303.27c3-1.32,7-2.63,10.32-2.63,2.3,0,4.59.63,6.89.63,3.5,0,6-2.17,9.21-3.06" transform="translate(-49.03 -4.14)"/>
</g>
<g id="beard">
<path class="cls-1" d="M204.29,310.69c0,1.1.07,2.23.07,3.37,0,11-17.57,17.7-17.57,32.55,0,19.82,15.59,21.46,15.77,30" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M200.72,313.16c-.21.12-17.79,14.76-17.79,30.55,0,4.33,3.51,7.28,3.51,14.77a15.28,15.28,0,0,1-.55,4.2" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M209.79,312.61c.05,1.6.17,3.21.17,4.8,0,12.85-18.47,22.07-18.47,36.72,0,11.16,9.12,13.35,9.12,21.08,0,3.46-1.63,5.07-4.11,7.2" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M217.2,311.78a44,44,0,0,1,1.09,7.11c0,11.65-17.42,23.13-17.42,37.36,0,14.48,13,12,13,23.77a12.73,12.73,0,0,1-1.29,5.58" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M226.26,316.73A22.15,22.15,0,0,1,229,326.87c0,10.84-17.22,23.15-17.22,34.64,0,7.34,5.1,6.74,5.1,13.41,0,3.57-1.72,5.46-4.27,7.92" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M229.56,312.88c3.37,8.06,10.24,15.87,10.24,24.84,0,17.41-21.79,26.7-21.79,35.06a10.78,10.78,0,0,0,.19,1.93" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M234,304.64c8.59,7.14,16.2,11.12,16.2,22.74,0,15.17-15.26,14.28-15.88,32.19" transform="translate(-49.03 -4.14)"/>
</g>
<g id="right_mustache" data-name="right mustache">
<path class="cls-1" d="M206.77,290.36c-17.86,0-10.5,37.73-30,37.73-7,0-10.73-6-10.73-12.56,0-3.91,1.68-9.15,5.35-10.37" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M197.15,289c-10.62,5.93-8.24,32.64-20.63,32.64-2.28,0-3.16-1.93-3.16-4.08a8.46,8.46,0,0,1,1.28-4.53" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M190.84,288.44a3,3,0,0,0-.43,0c-9.28,0-7.47,19.63-14.44,19.63-2.33,0-5.78-3-5.78-8.13a9,9,0,0,1,1.83-5.72" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M184.25,320.57a14.38,14.38,0,0,1-10.38,5A11.85,11.85,0,0,1,162.37,314c0-5.83,1.45-12.29,5.55-16.47" transform="translate(-49.03 -4.14)"/>
</g>
<g id="left_mustache" data-name="left mustache">
<path class="cls-1" d="M235.88,274.16a14.1,14.1,0,0,1,6.49-1.44c13.17,0,10.24,12.86,22.92,12.86,26.4,0,11.86-25.65,32.36-25.65a18.61,18.61,0,0,1,5.08.71" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M259.49,278.83c1.76,2.23,5.32,4.62,8.71,4.62,9.35,0,4.47-21.86,20.75-21.86,3.54,0,6.16,2.68,9.54,3.19" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M227.36,287.89c2.28-3.12,6.86-4,10.72-4,17.95,0,13.69,22.58,28.82,22.58,22.17,0,10-32.73,36.9-39.47" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M232,291.74a10.18,10.18,0,0,1,3.57-.6c15.67,0,12.06,13.68,17,17.81" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M233.68,294.21c17.37,5.54,10,18.37,30.49,18.37,33.46,0,18.72-32.72,37.52-41.23,2.38-1.07,4.86-1.11,6.9-2.88" transform="translate(-49.03 -4.14)"/>
</g>
<g id="nose_and_brow" data-name="nose and brow">
<path class="cls-1" d="M156,223.91c4.71-3,15-4.86,18-4.86,15.91,0,19.1,14.74,19.1,28.95,0,3.9-.15,7.81-.15,11.47,0,2.18.05,4.27.22,6.21" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M207.13,226.19c1.18-15.59,5.56-19.46,25-22.24,7.07-1,15.65,1.52,22.25,4.63" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M188.64,273.06c-1,.52-2.83,1.77-2.83,3,0,.09,10,11.43,15.1,11.43,14.71,0,14.54-14.92,23-14.92a1.64,1.64,0,0,1,1.66,1.12,7.93,7.93,0,0,1-6.59,4c-.21,0-.42,0-.64,0" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M227.64,275.53a12.75,12.75,0,0,0,3.87-8.79c0-.19,0-.38,0-.57" transform="translate(-49.03 -4.14)"/>
</g>
<g id="right_eye" data-name="right eye">
<path class="cls-1" d="M158.43,235.17c1.78-4.63,10.36-8.55,12.89-8.55,3.12,0,5.92,1.85,8.67,2.95,1.51.6,3.15.81,4.66,1.38" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M159.26,239.83c.62,2.93,6.68,5.8,11.11,5.8,5.84,0,9.62-3.63,14.17-8.39" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M167.5,229.12c-1.5,1.36-2.48,4.53-2.48,6.1,0,3.47,3.18,6.21,6.68,6.21,4.49,0,7.5-4,7.5-8.51,0-3.44-3.34-5.57-6.77-5.57A7.3,7.3,0,0,0,167.5,229.12Z" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M175.46,234.89a5.66,5.66,0,0,1-2.4,1h0c-1.23,0-2.24-1.54-2.24-2.75a1.74,1.74,0,0,1,.1-.61" transform="translate(-49.03 -4.14)"/>
</g>
<g id="left_eye" data-name="left eye">
<path class="cls-1" d="M218.57,226.93c1.7-4.26,10.89-9.08,18.22-9.08,3.41,0,7.55,1,11.44,1.17" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M220.77,230.5c1.24,2.92,5.59,3.25,8.79,3.25,7.12,0,12.46-2.85,16.94-8.47" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M219.4,215.12c2.76-3,6.78-3.78,11-3.78,4.49,0,9.27.86,13.12.86l.82,0" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M236.15,229.4c-6.46-.06-8.07-6.14-8.07-7.51,0-2.77,6.18-4.09,8.94-4.09s5.28.92,5.28,4a7.58,7.58,0,0,1-2.11,4.65A14.24,14.24,0,0,1,236.15,229.4Z" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M237,224.18a2.89,2.89,0,0,1-.5,0,3.08,3.08,0,0,1-2.84-2.31" transform="translate(-49.03 -4.14)"/>
</g>
<g id="hair">
<path class="cls-1" d="M258.12,141c28.28,4.26,10.61,36.69,26.91,36.69,3.9,0,6.85-1.75,10.41-1.75,2.18,0,4.26,2.22,8.23,2.22,4.28,0,8.82-4.42,8.82-7,0-3.45-3.82-4.07-6.88-4.63" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M264.44,140.42h.3c10.64,0,15.66,10.93,15.66,20.36,0,3.23-.6,5.31-.6,8.34,0,4.94,2.25,8,7.08,8,11.62,0,13.29-6.61,14.62-4.61,2,3,4.16,0,5,0" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M279.81,146.74c3,2.58,3.51,6.21,3.51,9.88,0,2.28-.2,4.19-.2,7.09,0,6.2,3.25,9,8.55,9s11.77-3.54,11.77-8.4c0-1.89-1.17-3.46-3.9-3.46h0a12.83,12.83,0,0,0-4.13,1" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M286.13,148.11c.59,1.89-.47,16.36,12.91,16.36A6.11,6.11,0,0,0,304.9,161" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M257,143.44a44.18,44.18,0,0,0-.51,5.78c0,12.62,19.36,7.34,19.36,24v.1c0,1.45-.19,2.93-.19,4.38,0,9.63,12.15,12.66,21.54,12.66,6,0,13.16-4.4,15.81-9.93" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M282,179.69c2.58,4.91,11.1,6.25,13.79,6.25,4.22,0,16.74-4.87,17.64-9.82" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M277.62,217.59c4.7-3.82,9.68-5.22,14.06-8.61,3.16-2.44,4.84-6.48,8.18-8.6,4.44-2.82,11.68-.16,13.81-5.87" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M277.89,213.2c10.51-3.19,7.93-8.72,16.75-13.92,6.21-3.66,17.68-.94,20.18-8.88" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M277.62,204.13c3.25-5.77,6.91-6.38,9.47-6.38,1,0,1.92.06,2.87.06S309.37,195.54,313,187" transform="translate(-49.03 -4.14)"/>
<path class="cls-1" d="M280.09,192.88a37,37,0,0,0,11.34,1.74,52.23,52.23,0,0,0,7.64-.61" transform="translate(-49.03 -4.14)"/>
</g>
</svg>
</parallax-element>
<script>
// @ is an alias to /src
import Vue from 'vue'
import { TweenMax } from 'gsap'
import '../gsap-bonus/DrawSVGPlugin'
export default {
mounted() {
console.log("mounted home")
TweenMax.staggerFrom(".cls-1", 2, {drawSVG:0}, 0.1);
}
}
</script>
<style lang="scss" scoped>
.cls-1{
stroke: #000;
stroke-width: 2px;
fill: none;
}
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueMouseParallax from 'vue-mouse-parallax'
Vue.use(VueMouseParallax)
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
the CSS for the home.vue page
.main-content{
height: 100%;
width: 100%;
position: absolute;
.infoBox {
position: relative;
float: right;
z-index: 4;
margin: 0;
background: #fff;
top: 450px;
right: 10%;
width: 400px;
height: auto;
color: #707070;
box-shadow: 10px 10px 20px rgba($color: #000000, $alpha: 0.10);
h1 {
margin-left: 50px;
margin-top: 50px;
margin-right: 50px;
margin-bottom: 0px;
font-family: 'Playfair Display', serif;
}
h2{
margin-left: 50px;
margin-top: 0;
font-family: 'Playfair Display', serif;
font-weight: lighter;
}
.infoText {
margin-left: 50px;
margin-right: 50px;
font-family: 'Montserrat', sans-serif;
}
a{
text-decoration: none;
}
.callToAction {
margin-top: 30px;
height: 70px;
width: 100%;
border-top: 1px solid #c4c4c4;
display: grid;
grid-template-columns: auto;
background-color: #fff;
transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
button {
align-self: center;
justify-self: center;
background: none;
outline: 0;
border: 0px;
font-family: 'Montserrat', sans-serif;
font-size: 1.5em;
text-transform: uppercase;
color: #c4c4c4;
cursor: pointer;
transition: color 0.5s ease;
-o-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-webkit-transition: color 0.5s ease;
}
}
.callToAction:hover {
background-color: $bgColor;
button {
color: #707070;
}
}
}
.illustration{
position: absolute;
width: auto;
height: auto;
svg {
position: absolute;
// float: left;
left: 25%;
height: 1000px;
width: auto;
}
}
}
amineyarman commented
Hello, this has been fixed in the latest release. The issue was that the parallax-container and parallax-element wrapped elements around a div. Now you can specify a tag. In the case of SVG elements you can just do tag="g".